我有图像,它有非常奇怪的形状：扁平六边形,边框和圆角.我想用CSS制作它.
我试图用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>
