Skip to main content
título editado
Enlace
user128299
user128299

¿Como hacer un Notch en un div Htmlhtml?

etiquetas editadas
Enlace
user128299
user128299
Origen Enlace

¿Como hacer un Notch en un div Html?

Estoy tratando de hacer el notch que tiene este menu en html, pero no me queda dotalmente redondo usando clip-path, es posible que quedase perfectamente redondo?

introducir la descripción de la imagen aquí

Lo que he conseguido es algo asi

#fondo{
    background-color:red;
}
.div-notch{
    height:30px;
    background-color:blue;

    left: calc( 50vw - 15px );
    /*For generate Clip-path use https://bennettfeely.com/clippy/*/
    clip-path: polygon(100% 0%, 100% 100%, 0% 98%, 0% 0%, 33% 0%, 34% 8%, 37% 15%,  42% 17%, 50% 18%, 58% 16%, 64% 12%, 66% 8%, 67% 5%, 68% 2%, 69% 0%);    
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="fondo" class="row text-center">
    <div class="col-4"></div>
    <div class="div-notch ">
            sasas
    </div>
</div>

introducir la descripción de la imagen aquí