Utilizando os pseudo-elementos :after
e :before
:
Na sua necessidade talvez seja necessário adaptar o código alterando os valores de top
, left
e rigth
até atingir o efeito que deseja
div{
width: 0;
height: 0;
top:40px;
left:50px;
position: relative;
border-style: solid;
border-width: 200px100px 190px130px 0 190px;130px;
border-color: #000000 transparent transparent transparent;
}
div:before {
content: "";
display: block;
position: absolute;relative;;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
width: 57%;200px;
height: 80px;50px;
background-color: white;
right: 50px;220px;
top: 7px;-80px;
}
div:after {
content: "";
display: block;
position: absolute;relative;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
width: 57%;200px;
height: 80px;50px;
background-color: white;
rightleft: 450px;20px;
top: 7px;-130px;
}
button{
width: 400px;
height: 80px;
display: block;
position: absolute;
left: 0px;
background: rgb(0, 0, 0);
border-radius: 70px;
}
<button></button>
<br/>
<div></div>