带内部文本的HTML六边形

Question

我正在尝试创建一个六边形小部件。这应该是这样的：

（请忽略这些行）

在移动设备上是这样的：

现在六角形本身应该相当容易，网上有很多关于如何创建它们的文档。但是，关于如何添加这样的文本的信息非常少。

通常六角形由几个扭曲并转动的元素组成，以形成形状。

这对我的需求并不是很好，因为文本不会被呈现（或者在另一个div下）。

使用以下CSS：

    .hexagon {
  position: relative;
  width: 200px; 
  height: 115.47px;
  background-color: #ffffff;
  margin: 57.74px 0;
  border-left: solid 2px #000000;
  border-right: solid 2px #000000;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 141.42px;
  height: 141.42px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 27.2893px;
}

.hexagon:before {
  top: -70.7107px;
  border-top: solid 2.8284px #000000;
  border-right: solid 2.8284px #000000;
}

.hexagon:after {
  bottom: -70.7107px;
  border-bottom: solid 2.8284px #000000;
  border-left: solid 2.8284px #000000;
}

我创建了基本的六边形：

这是一个小提琴：https://jsfiddle.net/c5dk9Lay/1/

你们是否有任何创建这样的小部件或知道解决方案的经验，以便可以显示文本

Answer 1

检查这个小提琴。 Here

<强> HTML：     <div class="hexagon"> <div class="text"> <h1>89%</h1> <p>My Overall Score</p> </div> </div>

添加CSS：

.text{
  position: absolute;
z-index: 1000;
width: 100%;
text-align: center;

}