CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了带边框和圆角的CSS3六角形按钮大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有图像,它有非常奇怪的形状:扁平六边形,边框和圆角.我想用CSS制作它.
我试图用CSS制作它,以便它可以动态扩展更长的文本,但它不适合我.

这是图像

解决方法

CSS:

您可以使用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,请注明来意。