Hexagon CSS - Comforting Tools

<!DOCTYPE html>
<html>

<head>
     <style>
         body {
                   background: darkgreen;
}

      .my-hexagon {
                 width: 150px;
                 border-left: 80px solid transparent;
                 border-right: 80px solid transparent;
                 border-top: 150px solid pink;
                 position: absolute;
                 left: 50%;
                 top: 50%;
                 transform: translate(-50%, -50%);
}
     .my-hexagon:after {
                 content: "";
                 width: 150px;
                 border-left: 80px solid transparent;
                 border-right: 80px solid transparent;
                 border-bottom: 150px solid pink;
                 position: absolute;
                 left: 50%;
                 top: -224.4px;
                 transform: translate(-50%, -50%);
}

     </style>
</head>

<body>
   <div class="my-hexagon"></div>
</body>

</html>