我可以实现如下所示的具有实心边框的六边形:
.hex {
margin-top: 70px;
width: 208px;
height: 120px;
background: red;
position: relative;
}
.hex:before,
.hex:after {
content: "";
border-left: 104px solid transparent;
border-right: 104px solid transparent;
position: absolute;
}
.hex:before {
top: -59px;
border-bottom: 60px solid red;
}
.hex:after {
bottom: -59px;
border-top: 60px solid red;
}
.hex.inner {
background-color: lightgreen;
-webkit-transform: scale(.98, .98);
-moz-transform: scale(.98, .98);
transform: scale(.98, .98);
z-index: 1;
}
.hex.inner:before {
border-bottom: 60px solid lightgreen;
}
.hex.inner:after {
border-top: 60px solid lightgreen;
}
<div class="hex">
<div class="hex inner">
</div>
</div>
但是,我想创建一个带虚线边框的六边形,如下图所示:
最佳答案
这是一个带有 inline svg 的方法使用:
- polygon element对于六边形
- stroke-dasharray对于虚线边框(控制点之间的大小和间距)
- stroke-linecap对于虚线边框
svg{width:30%;margin:0 auto;}
<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon fill="#92D050"
stroke="red"
stroke-width="1"
stroke-linecap="round"
stroke-dasharray="0.5,3"
points="50 1 95 25 95 75 50 99 5 75 5 25"/>
</svg>
关于html - 带虚线边框的 CSS3 六边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36477745/