Skip to main content
adicionou 440 caracteres ao conteúdo
Fonte Link
MarceloBoni
  • 6,4mil
  • 3
  • 30
  • 62

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>

Utilizando os pseudo-elementos :after e :before:

div{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 200px 190px 0 190px;
  border-color: #000000 transparent transparent transparent;
}

div:before {
  content: "";
  display: block;
  position: absolute;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  width: 57%;
  height: 80px;
  background-color: white;
  right: 50px;
  top: 7px;
}

div:after {
  content: "";
  display: block;
  position: absolute;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  width: 57%;
  height: 80px;
  background-color: white;
  right: 450px;
  top: 7px;
}
<div></div>

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: 100px 130px 0 130px;
  border-color: #000000 transparent transparent transparent;
}

div:before {
  content: "";
  display: block;
  position: relative;;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  width: 200px;
  height: 50px;
  background-color: white;
  right: 220px;
  top: -80px;
}

div:after {
  content: "";
  display: block;
  position: relative;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  width: 200px;
  height: 50px;
  background-color: white;
  left: 20px;
  top: -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>

Fonte Link
MarceloBoni
  • 6,4mil
  • 3
  • 30
  • 62

Utilizando os pseudo-elementos :after e :before:

div{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 200px 190px 0 190px;
  border-color: #000000 transparent transparent transparent;
}

div:before {
  content: "";
  display: block;
  position: absolute;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  width: 57%;
  height: 80px;
  background-color: white;
  right: 50px;
  top: 7px;
}

div:after {
  content: "";
  display: block;
  position: absolute;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  width: 57%;
  height: 80px;
  background-color: white;
  right: 450px;
  top: 7px;
}
<div></div>