JSFiddle - React, Tailwind, and code Playground

HTML

<span class="hex">
    <span class="hex__part">
        <span class="hex__part hex__part_content">
            12
        </span>
    </span>
</span>

SCSS

body {
  height: 100vh;
  background: linear-gradient(45deg, green, yellow, blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

* {
  &, &::before, &::after { box-sizing: border-box; }
}

.hex {
  visibility: hidden;
  display: block;
  overflow: hidden;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  transform: rotate(120deg);
  width: 100px;
  height: 200px;
  margin: -42px 0;
  
  &__part {
    visibility: hidden;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    transform: rotate(-60deg);
   
    &_content {
      visibility: visible;
      background: (
        linear-gradient(210deg, transparent, transparent 83% , red 83%, red) 50% 0 no-repeat,
        linear-gradient(150deg, transparent, transparent 83% , red 83%, red) 50% 0 no-repeat,
        linear-gradient(30deg, transparent, transparent 83% , red 83%, red) 50% 0 no-repeat,
        linear-gradient(-30deg, transparent, transparent 83% , red 83%, red) 50% 0 no-repeat
      );
      width: 100px;
      height: 116px;
      margin: 42px 0;
      border: 2px solid red;
  
      &::after {
        content:"";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
      }
    }
  }
}