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

}