HTML hexagon with inner text

Question

I am trying to create a hexagon widget. That should look something like this:

(Please ignore the lines)

And on mobile something like this:

Now the hexagon it self should be fairly easy there is a lot of documentation online on how to create them. However there is very little info on how to add text like this.

Usually the hexagon are made of a couple of elements twisted and turned to create the shape.

This isnt very good for my needs because the text would then not be rendered (or be under another div).

using the following 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;
}

I have created the basic hexagon:

Here is a fiddle: https://jsfiddle.net/c5dk9Lay/1/

Does any of you have any experience in creating such a widget or know of a work around so that the text can be shown

Answer 1

Check this fiddle. Here

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

Add CSS:

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

}