JSFiddle - React, Tailwind, and code Playground

by Avdhut Sonpethkar

HTML

<div class="menucontainer">
    &nbsp;
    
</div>

CSS

.menucontainer
{margin: 50px;
    height: 90px;
    width:90px;
    background: black;
  
    position:relative;
    border-radius:90px;
    -moz-border-radius:90px;
    -webkit-border-radius:90px;
}

.menucontainer:after {
    content:" ";
    border: solid transparent;
    margin: 0px;
    padding: 0px;
    position: absolute;
    pointer-events: none;
    border-top: 30px solid  transparent;
    border-bottom: 30px solid  black;
    border-right: 30px solid  black;
    border-left: 30px solid  transparent;

    top: 58%;
    left: -4%;
    margin-left: -10px;

}
.menucontainer:before {
    content:" ";
    border: solid transparent;
    margin: 0px;
    padding: 0px;
    position: absolute;
    pointer-events: none;
   border-top: 30px solid  transparent;
    border-bottom: 30px solid  black;
    border-right: 30px solid  transparent;
    border-left: 30px solid  black;
    bottom: -25%;
    left: 62%;
    margin-left: -10px;
  
}