带有内部文本的 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;
}

我已经创建了基本的六边形:

这是一个 fiddle :https://jsfiddle.net/c5dk9Lay/1/

你们中的任何人是否有创建此类小部件的经验或知道可以显示文本的解决方法

Answer 1

检查这个 fiddle 。 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;