Hexagon with curved edges

by Matt Reynolds

HTML

<div class="hexagon"></div>
    <div class="circle"></div>

CSS

body {
      background-color: #eeeeee;
    }
    
    .circle {
      width: 240px;
      position: absolute;
      top:15px;
      height: 240px;
      z-index: 2;
      background: -webkit-radial-gradient(transparent 59%, #eeeeee 41%);
        background: -o-radial-gradient(transparent 59%, #eeeeee 41%); 
        background: -moz-radial-gradient(transparent 59%, #eeeeee 41%); 
        background: radial-gradient(transparent 59%, #eeeeee 41%); 
    }
    
    
    .hexagon {
      position: absolute;
      top: 31px;
      left: 38px;
      width: 180px; 
      height: 103.92px;
      background-color: #64C7CC;
      margin: 51.96px 0;
      z-index: -1;
    }
    
    .hexagon:before,
    .hexagon:after {
      content: "";
      position: absolute;
      width: 0;
      border-left: 90px solid transparent;
      border-right: 90px solid transparent;
     
    }
    
    .hexagon:before {
      bottom: 100%;
      border-bottom: 51.96px solid #64C7CC;
    }
    
    .hexagon:after {
      top: 100%;
      width: 0;
      border-top: 51.96px solid #64C7CC;
    }