css - 具有半透明背景和边框的六边形

Question

我已经废弃了一些六边形 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>

让它发挥作用的最佳方法是什么？

Answer 1

你可以修改带有渐变的伪元素的背景颜色，只给它的一半着色:

.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>