1

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í

1
  • 1
    Por favor mira esta pregunta: es.stackoverflow.com/questions/197349/… Si quieres utilizar clip-path mira la respuesta de Alvaro Montoro. Para una solución alternativa mira mi respuesta (utiliza box-shadow)
    – enxaneta
    Commented el 5 jul. 2020 a las 8:45

2 respuestas 2

0

He podido resolverlo con un truco bastante ingenioso que comento @enxaneta.

El truco básicamente consiste en crear un circulo transparente el cual sera nuestro notch, posterior a esto agregamos una sombra en la parte inferior dandole la forma y dimensiones deseadas.

:root {
  --notch-size: 50px;
    --menu-width:  327px;
    --menu-height:  60px;
}

#menu-notch {
    margin:50px;
    /*sombra*/
  width: var(--menu-width);
  height: var(--menu-height);
  border-radius: calc(var(--menu-height)/2);
  position: relative;
  overflow: hidden;
}

#menu-notch::before {
  content: "";
  display: inline-block;
    /*for notch*/
  background: transparent;
  width: var(--notch-size);
    height: var(--notch-size);
  border-radius: 50%;
  position: relative;
    
  left: calc((var(--menu-width)/2) - ( var(--notch-size)/2  ) );
  top: calc(var(--notch-size)/-2);
  box-shadow: 0 calc(var(--notch-size) * 2) 0 var(--menu-width) blue;
}

body {
  background: gold;
}
<div id="menu-notch">   
</div>

0

Para este ejemplo consideré 3 elementos:

  • Un div que contendrá el círculo base o blanco que colocaremos parcialemente encima de la barra
  • Dentro del div anterior coloco otro div para el círculo interno
  • Un div externo que servirá para dibujar la barra

En cuanto a la maquetación:

  • Al div que servirá como barra le coloco estilos genéricos solo para darle apariencia, tales como:
    • ancho definido
    • alto definido
    • color de fondo
    • bordes en las esquinas
  • Al div que servirá como círculo contenedor del principal lo dibujo con:
    • La propiedad clip-path
    • Le doy un color de fondo para que al momento de sobre ponerlo parcialmente sobre la barra genere el efecto de recorte
    • Lo muevo al darle un posicionamiento relative y desplazarlo con top y left
  • Finalmente al círculo interno
    • Le doy un alto y ancho definido que sea mejor al del círculo blanco que lo contiene
    • Lo dibujo con clip-path
    • Le doy un posicionamiento relativo y lo desplazo con top y left

Código:

    <style>
      #barra {
        background-color: teal;
        border-radius: 10px;
        height: 30px;
        width: 300px;
      }
      #circulo {
        background-color: white;
        clip-path: circle();
        height: 40px;
        left: 130px;
        position: relative;
        top: 20px;
        width: 40px;
      }
      #final {
        background-color: crimson;
        clip-path: circle();
        height: 30px;
        left: 4.5px;
        position: relative;
        top: 5px;
        width: 30px;
      }
    </style>
    <div id="circulo">
      <div id="final"></div>
    </div>
    <div id="barra">
      
    </div>

Visualizandose así:

introducir la descripción de la imagen aquí

1
  • Gracias por tu respuesta, pero necesitaba que el borde que el notch que se generara fuera transparente,dando la sensación de que el circulo "corta" al otro elemento. He podido solucionarlo sin usar clip-path y con el comentario de @enxaneta. Igualmente muchas gracias
    – macorreag
    Commented el 6 jul. 2020 a las 6:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.