JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
        
            <a href="">Звоните нам!</a>
            <a href="">Звоните нам!</a>
            <a href="">Звоните нам!</a>
            <a href="">Звоните нам!</a>
        

      </div>

CSS

.wrap{
margin:100px auto;
width:600px;
font-family:Tahoma;
}


 a{
display:inline-block;
text-decoration:underline;
color:#000;
padding:45px 5px 0px 5px;
font-size:20px;
height:30px;
}

 a:hover{
text-decoration:none;
color:#fff;
background:#000;
border-radius:40px 40px 20px 20px;
position:relative;
}

a:hover:before{
content: '';
position:absolute;
text-align:center;
border-radius:30px 30px 0px 0px;
background:#fff;
width:106px;
height:50px;
top:-5px;
left:10%;
}

 a:hover:after{
content: '';
position:absolute;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid red;
bottom:-15px;
left:41%;
}