html - 内含元素的 CSS 六边形

Question

我有一个由 CSS 创建的六边形。我试图在六边形内获取标题、段落和按钮，但所有这些元素都隐藏在格式化前后的六边形后面。这是代码的链接:https://jsfiddle.net/o8a3pm3h/6/ .任何有关如何将元素放置在六边形 div 表面的建议都将受到赞赏。

#hex3 {
  width: 200px;
  height: 200px;
}
#color3 {
  background-color: #CED7DC;
}
.hexagon-wrapper {
  text-align: center;
  margin: 20px;
  position: relative;
  display: inline-block;
}
.hexagon {
  height: 100%;
  width: calc(100% * 0.57735);
  display: inline-block;
  z-index: 1;
}
.hexagon:before {
  position: absolute;
  top: 0;
  right: calc((100% / 2) - ((100% * 0.57735) / 2));
  background-color: inherit;
  height: inherit;
  width: inherit;
  content: '';
  transform: rotateZ(60deg);
}
.hexagon:after {
  position: absolute;
  top: 0;
  right: calc((100% / 2) - ((100% * 0.57735) / 2));
  background-color: inherit;
  height: inherit;
  width: inherit;
  content: '';
  transform: rotateZ(-60deg);
}

<!--Please maintain the styling here because its on top of an image-->
<div id="hex3" class="hexagon-wrapper" style="position:absolute; top:80px; right:400px;">
  <div id="color3" class="hexagon">
    <h4>TEST</h4>
    <p>TESTTTTTTTTTT</p>
    <button type="button" class="btn btn-secondary" id="grid-row-btn-2" onclick="location.href='/#/'">
      DISCOVER MORE &nbsp;<span class="glyphicon glyphicon-chevron-right"></span>
    </button>
  </div>
</div>

**此外，我知道内联 CSS 是不好的做法，但它仅适用于此演示。

Answer 1

您还需要定位文本并设置 z-index，以便文本位于其他元素之上:

.hexagon h4, .hexagon p, .hexagon button {
  position: relative;
  z-index: 1
}

例子

#hex3 {
  width: 200px;
  height: 200px;
}
#color3 {
  background-color: #CED7DC;
}
.hexagon-wrapper {
  text-align: center;
  margin: 20px;
  position: relative;
  display: inline-block;
}
.hexagon {
  height: 100%;
  width: calc(100% * 0.57735);
  display: inline-block;
  z-index: 1;
}
.hexagon:before {
  position: absolute;
  top: 0;
  right: calc((100% / 2) - ((100% * 0.57735) / 2));
  background-color: inherit;
  height: inherit;
  width: inherit;
  content: '';
  transform: rotateZ(60deg);
}
.hexagon:after {
  position: absolute;
  top: 0;
  right: calc((100% / 2) - ((100% * 0.57735) / 2));
  background-color: inherit;
  height: inherit;
  width: inherit;
  content: '';
  transform: rotateZ(-60deg);
}
.hexagon h4,
.hexagon p,
.hexagon button {
  position: relative;
  z-index: 1
}

<!--Please maintain the styling here because its on top of an image-->
<div id="hex3" class="hexagon-wrapper" style="position:absolute; top:80px; right:400px;">
  <div id="color3" class="hexagon">
    <h4>TEST</h4>
    <p>TESTTTTTTTTTT</p>
    <button type="button" class="btn btn-secondary" id="grid-row-btn-2" onclick="location.href='/#/'">
      DISCOVER MORE &nbsp;<span class="glyphicon glyphicon-chevron-right"></span>
    </button>
  </div>
</div>