CSS驱动的六边形无法添加文本或图像

Question

我正在生成一个css驱动的六边形，但是我不能添加文本或图像而不会产生爆炸或倾斜。我还尝试添加一个Play.start或一个简单的转换来简单地将其翻过来 - 有关如何修改的任何建议吗？

＆＃13;

＆＃13;

margin-left:-100px;

＆＃13;

body {
  background: #ecf0f1;
}
#hex1 {
  width: 75px;
  height: 75px;
}
#color1 {
  background-color: #D93;
}
.hexagon-wrapper {
  text-align: center;
  margin: 20px;
  position: relative;
  display: inline-block;
}
.hexagon {
  height: 100%;
  width: calc(100% * 0.57735);
  display: inline-block;
}
.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);
}

＆＃13;

＆＃13;

＆＃13;

感谢。

Answer 1

在hexagon div下方创建了一个div，并将此样式添加到其中。

.text{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

这是你期待的吗？请告诉我您的反馈意见。谢谢！

body {
  background: #ecf0f1;
}

#hex1 {
  width: 75px;
  height: 75px;
  position: relative;
}



#color1 {
  background-color: #D93;
}

.hexagon-wrapper {
  text-align: center;
  margin: 20px;
  position: relative;
  display: inline-block;
}

.hexagon {
  height: 100%;
  width: calc(100% * 0.57735);
  display: inline-block;
}

.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);
}

.text{

     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

<div id="hex1" class="hexagon-wrapper">
    <div id="color1" class="hexagon"></div>
    <div class="text">yellow</div>
</div>