我有图像并且它有非常奇怪的形状:带有边框和圆角的扁平六边形。我想用 CSS 制作它。
我试图用 CSS 来制作它,以便它可以扩展动态以获得更长的文本,但它对我不起作用。
这是图片
答案 0 :(得分:11)
您可以使用2个3d变换的伪元素来实现此形状:
REPLACE(@EmployeeCodeDB,' ','')
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;}
请注意,您需要添加适当的供应商前缀以最大化浏览器支持。有关详细信息,请参阅canIuse。
另一种方法是使用带有多边形元素的内联svg:
<div>some text</div><br/><br/>
<div>some longer text</div>
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%;
}
答案 1 :(得分:-1)
我从here复制了样式并进行了轻微更改,以便大致匹配按钮的样子:
#hexagon {
width: 200px;
height: 30px;
background: orange;
position: relative;}
#hexagon:before {
content: "";
position: absolute;
top: -15px;
left: 0;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 15px solid orange;}
#hexagon:after {
content: "";
position: absolute;
bottom: -15px;
left: 0;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 15px solid orange;}
六边形用于形状的中间扇区
六角形:后面是形状的底部
Hexagon:之前是形状的顶部
#hexagon中指定的宽度需要匹配border-left + border-right in:before和:after 即(200px = 100px + 100px)
#hexagon中指定的高度需要匹配border-top + border-bottom:before和:after,(30px = 15px + 15px)
HTML就是
<div id="hexagon">
到目前为止,我还没有看到如何使用你正在使用的边框效果,但是如果有人可以扩展到这个,我认为这是可能的。