我为一个六边形的 div
编写了一些代码,它运行得很好。问题是现在我需要一个 半透明背景,但是 :after 和 :before 标签重叠导致透明度不一致。
.hexagon {
position: relative;
width: 290px;
height: 173.21px;
margin: 86.60px 0;
border-left: solid 5px #333333;
border-right: solid 5px #333333;
background-color: rgb(102, 204, 34, 0.7);
}
.hexagon:before,
.hexagon:after {
box-sizing: border-box;
content: "";
position: absolute;
z-index: 1;
width: 212.13px;
height: 212.13px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: rgb(102, 204, 34, 0.7);
left: 38.9340px;
}
.hexagon:before {
top: -106.0660px;
border-top: solid 7.0711px #333333;
border-right: solid 7.0711px #333333;
}
.hexagon:after {
bottom: -106.0660px;
border-bottom: solid 7.0711px #333333;
border-left: solid 7.0711px #333333;
}
<div class="hexagon">
<span style="font-size: 11px">1</span>
<span>2 </span>
</div>