内部テキストのあるHTML六角形

Question

六角形のウィジェットを作成しようとしています。

（行を無視してください）

そして、このようなモバイル何か上：今

それは自己がかなりあるべき六角それは次のようになります。簡単にそれらを作成する方法についてオンラインで多くのドキュメントがあります。しかし、このようにテキストを追加する方法に関する情報はほとんどありません。

通常、六角形は、ツイストして回転させた2つの要素で構成され、形状を作成します。

テキストはレンダリングされない（または別のdivの下にある）ので、これは私のニーズにはあまり適していません。私は基本的な六角形で作成した

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

：以下CSS使用

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; 

}