大佬教程收集整理的这篇文章主要介绍了带边框和圆角的CSS3六角形按钮,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
您可以使用2个3d变换的伪元素来实现此形状:
div { display: inline-block; position: relative; padding: 20px 50px; perspective: 30px; } div:after,div:before { content: ''; position: absolute; top: 0; width: 100%; height: 100%; z-index: -1; BACkground: orange; border: 2px solid darkorange; box-sizing: border-box; } div:before { right: 50%; transform-origin: 100% 0; transform: rotateY(-10deg); border-radius: 10px 0 0 10px; border-width: 3px 0 3px 5px; } div:after { left: 50%; transform-origin: 0 0; transform: rotateY(10deg); border-radius: 0 10px 10px 0; border-width: 3px 5px 3px 0; } body{text-align:center;}
<div>some text</div><br/><br/> <div>some longer text</div>
请注意,您需要添加适当的供应商前缀以最大化浏览器支持.有关更多信息,请参见canIuse.
SVG:
另一种方法是使用带有多边形元素的内联svg:
div{ display:inline-block; position:relative; padding:20px 50px; } svg{ position:absolute; top:0; left:0; z-index:-1; min-width:100%; min-height:100%; }
<div class="btn"> some text <svg viewbox="0 0 100 30"> <polygon points="2 8 50 2 98 8 98 22 50 28 2 22" stroke-linejoin="round" stroke-width="2" stroke="darkorange" fill="orange" /> </svg> </div> <div class="btn"> some longer text <svg viewbox="0 0 100 30"> <polygon points="2 8 50 2 98 8 98 22 50 28 2 22" stroke-linejoin="round" stroke-width="2" stroke="darkorange" fill="orange" /> </svg> </div>
以上是大佬教程为你收集整理的带边框和圆角的CSS3六角形按钮全部内容,希望文章能够帮你解决带边框和圆角的CSS3六角形按钮所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。