实现带三角形button按钮附带边框 |
您所在的位置：网站首页 › html向下三角代码 › 实现带三角形button按钮附带边框 |
实现带三角形button按钮附带边框
|
实现带三角形button按钮附带边框——html,css
通过使用HTML+CSS实现带边框的三角形按钮样式 先看看效果 html 立即注册大三角形 div .tri{ position:absolute; z-index: 9; top: 1px; left: 145px; content: ''; width: 0; height: 0; border-bottom: 21px solid transparent; border-left: 21px solid rgb(112,164,77); border-top: 21px solid transparent; }小三角形 main>div::after{ position:absolute; top: 0; left: 160px; content: ''; width: 0; height: 0; border-bottom: 22px solid transparent; border-left: 22px solid rgb(70,111,39); border-top: 22px solid transparent; }结构样式 main>div{ position: relative; width: 160px; height: 44px; line-height: 44px; margin: 20px; text-align: center; background-color: rgb(112,164,77); border-radius: 5px 0 0 5px; border: 1px solid rgb(70,111,39); border-right: 0px; cursor: pointer; } button{ background-color: rgb(112,164,77); border: 0; width: 100%; height: 100%; color: #fff; font-size: 20px; cursor: pointer; }
|
实现原理： 使用两个三角形，通过叠加，进而实现边框。 两个三角形重叠，下面的三角形比上面的三角形大一点，使下面的三角形充当上面的三角形的边框
【本文地址】
今日新闻 |
推荐新闻 |