css 육각형 만들기

html

<div id="hexagon">
  <div class="el01_box">
    <div class="el01_number">01</div>
    <div class="el01_title">PNEUMA, THE SPACE OF LIFE</div>
  </div>
  <div class="el01_box">
    <div class="el01_number">01</div>
    <div class="el01_title">PNEUMA, THE SPACE OF LIFE</div>
  </div>
  <div class="el01_box">
    <div class="el01_number">01</div>
    <div class="el01_title">PNEUMA, THE SPACE OF LIFE</div>
  </div>
  <div class="el01_box">
    <div class="el01_number">01</div>
    <div class="el01_title">PNEUMA, THE SPACE OF LIFE</div>
  </div>
</div>

css (scss)

.slide_sideBar {
        position: absolute;
        top: 620px;
        right: 300px;
        z-index: 1;
        #hexagon {
          position: absolute;
          width: 156px;
          height: 180px;
          background: white;
        }
        #hexagon::before {
          content: "";
          position: absolute;
          top: -42.8675px;
          left: 0;
          width: 0;
          height: 0;
          border-left: 78px solid transparent;
          border-right: 78px solid transparent;
          border-bottom: 42.8675px solid white;
        }
        #hexagon::after {
          content: "";
          position: absolute;
          bottom: -42.8675px;
          left: 0;
          width: 0;
          height: 0;
          border-left: 78px solid transparent;
          border-right: 78px solid transparent;
          border-top: 42.8675px solid white;
        }
      }

결과