Hexagone

<!-- https://ninjarockstar.dev/css-hex-grids/ -->
<style>
.hexagone {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: yellow;
  clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
  padding: 2rem 25%;
  text-align: center;
}
.cube {
  position: relative;
  display: inline-block;
  height: 100px;
  width: 100px;
  margin: 28px;
}
</style>
<div class="cube">
  <div class="hexagone">toto</div>
</div>
<div class="cube">
  <div class="hexagone">toto</div>
</div><!-- https://ninjarockstar.dev/css-hex-grids/ -->
<style>
.hexagone {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: yellow;
  clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
  padding: 2rem 25%;
  text-align: center;
}
.cube {
  position: relative;
  display: inline-block;
  height: 100px;
  width: 100px;
  margin: 28px;
}
</style>
<div class="cube">
  <div class="hexagone">toto</div>
</div>
<div class="cube">
  <div class="hexagone">toto</div>
</div>