我已经废弃了一些六角形的代码,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>
使其运作的最佳方法是什么?
您可以使用渐变来修改伪元素的背景颜色,以使其仅着色一半:
.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);
left: 38.9340px;
}
.hexagon:before {
top: -106.0660px;
border-top: solid 7.0711px #333333;
border-right: solid 7.0711px #333333;
background:linear-gradient(to bottom left,rgb(102, 204, 34, 0.7) 48%,transparent 48%);
}
.hexagon:after {
bottom: -106.0660px;
border-bottom: solid 7.0711px #333333;
border-left: solid 7.0711px #333333;
background:linear-gradient(to top right,rgb(102, 204, 34, 0.7) 48%,transparent 49%);
}
<div class="hexagon">
<span style="font-size: 11px">1</span>
<span>2 </span>
</div>
您也可以考虑使用SVG解决方案:
body {
margin:0;
background:linear-gradient(to right, blue 10%,pink);
}
.box {
background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewBox="-5 -5 180 220"><path fill="rgb(102, 204, 34, 0.5)" stroke="black" stroke-width="3" d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path></svg>');
height: 200px;
width: 180px;
background-repeat: no-repeat;
background-position: center;
display:inline-block;
line-height:150px;
text-align:center;
}
svg {
display:inline-block;
vertical-align:top;
}
<div class="box">
SVG as background
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewBox="-5 -5 180 220"><path fill="rgb(102, 204, 34, 0.5)" stroke="black" stroke-width="3" d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
<text x=20 y=80 >Normal SVG</text>
</svg>
这是结合剪切路径和渐变的另一个不完美的想法:
body {
background:linear-gradient(to right,pink, blue);
}
.hexagon {
position: relative;
width: 290px;
height: 290px;
margin: 50px;
background:
linear-gradient(to bottom left,transparent calc(50% - 3px),#000 calc(50% - 3px))0 100%/50% 25% no-repeat,
linear-gradient(to bottom right,transparent calc(50% - 3px),#000 calc(50% - 3px))100% 100%/50% 25% no-repeat,
linear-gradient(to top right,transparent calc(50% - 3px),#000 calc(50% - 3px))100% 0/50% 25% no-repeat,
linear-gradient(to top left,transparent calc(50% - 3px),#000 calc(50% - 3px))0 0/50% 25% no-repeat,
linear-gradient(#000,#000)0 0/3px 100% no-repeat,
linear-gradient(#000,#000)100% 0/3px 100% no-repeat,
rgba(102, 204, 34, 0.5);
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
<div class="hexagon">
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句