JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<div class="shape shape--hexagon">
  <svg class="shape__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M47.65,20.69l-3.72-.63A20.18,20.18,0,0,0,42,15.33l2.18-3.08a3,3,0,0,0-.36-3.72L41.59,6.26a2.89,2.89,0,0,0-3.72-.36L34.8,8.07a26.91,26.91,0,0,0-4.73-2l-.63-3.72A2.83,2.83,0,0,0,26.63,0H23.37a2.9,2.9,0,0,0-2.8,2.44l-.63,3.72a21.72,21.72,0,0,0-4.72,1.91L12.14,5.89a2.9,2.9,0,0,0-3.72.36L6.16,8.52a2.9,2.9,0,0,0-.36,3.72L8,15.3A21.28,21.28,0,0,0,6.07,20l-3.7.65A2.82,2.82,0,0,0,0,23.49v3.17a2.73,2.73,0,0,0,2.37,2.72L6.05,30A19.79,19.79,0,0,0,8,34.76L5.78,37.84a3,3,0,0,0,.37,3.72l2.26,2.27a2.89,2.89,0,0,0,3.72.36L15.29,42A21.28,21.28,0,0,0,20,43.92l.63,3.72A2.83,2.83,0,0,0,23.46,50h3.16a2.91,2.91,0,0,0,2.81-2.36l.64-3.72A20.11,20.11,0,0,0,34.79,42l3,2.26a3,3,0,0,0,3.71-.36l2.27-2.27a2.9,2.9,0,0,0,.36-3.72L42,34.85a21.09,21.09,0,0,0,1.9-4.73l3.8-.63A2.83,2.83,0,0,0,50,26.68V23.51A2.91,2.91,0,0,0,47.65,20.69ZM25,33.66A8.63,8.63,0,0,1,16.39,25h0A8.62,8.62,0,1,1,25,33.66Z"></path></svg>
  </div>

SCSS

body {
  max-width: 300px;
}

.shape {
    $b: &;

    align-items: center;
    background-color: peru;
    box-sizing: content-box;
    color: white;
    display: flex;
    justify-content: center;
    padding: 8px;
    position: relative;
    
    &__icon {
        max-width: 55%;
    }

    &--hexagon {
        --stroke: 20px;
        
        aspect-ratio: 13/15;
        clip-path: polygon(
          50% 0%, 
          100% 25%, 
          100% 75%, 
          50% 100%, 
          0% 75%, 
          0% 25%
         );
        
        &::before {
          background-color: aqua;
          clip-path: polygon(
            50% var(--stroke), 
            calc(100% - var(--stroke)) calc(25% + (var(--stroke) * 0.5)), 
            calc(100% - var(--stroke)) calc(75% - (var(--stroke) * 0.5)), 
            50% calc(100% - var(--stroke)), 
            var(--stroke) calc(75% - (var(--stroke) * 0.5)), 
            var(--stroke) calc(25% + (var(--stroke) * 0.5))
           );
        
          content: '';
          height: 100%;
          position: absolute;
          width: 100%;
          z-index: -1;
        }
        
    }

}


* {
  margin: 0;
  padding: 0;
}

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