user2557504 user2557504 - 3 months ago 17
CSS Question

css driven hexagons cant add text or image

I am generating a css driven hexagon, but I cannot add text or images without it imploding or skewing. I have also tried adding a margin-left:-100px; or a simple transformation to simply scoot it over-
Any suggestions on how to modify?



body {
background: #ecf0f1;
}

#hex1 {
width: 75px;
height: 75px;
}



#color1 {
background-color: #D93;
}

.hexagon-wrapper {
text-align: center;
margin: 20px;
position: relative;
display: inline-block;
}

.hexagon {
height: 100%;
width: calc(100% * 0.57735);
display: inline-block;
}

.hexagon:before {
position: absolute;
top: 0;
right: calc((100% / 2) - ((100% * 0.57735) / 2));
background-color: inherit;
height: inherit;
width: inherit;
content: '';
transform: rotateZ(60deg);
}

.hexagon:after {
position: absolute;
top: 0;
right: calc((100% / 2) - ((100% * 0.57735) / 2));
background-color: inherit;
height: inherit;
width: inherit;
content: '';
transform: rotateZ(-60deg);
}

<div id="hex1" class="hexagon-wrapper">
<div id="color1" class="hexagon">yellow</div>
</div>





Thanks

Answer

Created a div below the hexagon div and added this style to it.

.text{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

Is this what you are expecting? Please let me know your feedback. Thanks!

body {
  background: #ecf0f1;
}

#hex1 {
  width: 75px;
  height: 75px;
  position: relative;
}



#color1 {
  background-color: #D93;
}

.hexagon-wrapper {
  text-align: center;
  margin: 20px;
  position: relative;
  display: inline-block;
}

.hexagon {
  height: 100%;
  width: calc(100% * 0.57735);
  display: inline-block;
}

.hexagon:before {
  position: absolute;
  top: 0;
  right: calc((100% / 2) - ((100% * 0.57735) / 2));
  background-color: inherit;
  height: inherit;
  width: inherit;
  content: '';
  transform: rotateZ(60deg);
}

.hexagon:after {
  position: absolute;
  top: 0;
  right: calc((100% / 2) - ((100% * 0.57735) / 2));
  background-color: inherit;
  height: inherit;
  width: inherit;
  content: '';
  transform: rotateZ(-60deg);
}

.text{

     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }
<div id="hex1" class="hexagon-wrapper">
    <div id="color1" class="hexagon"></div>
    <div class="text">yellow</div>
</div>

Comments