1

He investigado como replicar el efecto de la imagen que adjunto sin suerte, solo se como crear el efecto de circulo con bordes blancos dando un efecto muy parecido pero sin bordes redondeados como se muestra en el siguiente código:

body {
  padding-top: 50px
}

.barra-negra {
  position: relative;
  width: 100%;
  height: 70px;
  background-color: #141414;
}

.circulo {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 50px;
  height: 50px;
  border: 5px solid #ffffff;
  border-radius: 50%;
  background-color: #ff0000;
  transform: translate(-50%, -50%);
}
<body>
  <div class="barra-negra">
    <div class="circulo"></div>
  </div>
</body>

Lo que quiero lograr es algo parecido a la imagen sin tener que utilizar borde blanco y con los bordes de la caja negra redondeados.

introducir la descripción de la imagen aquí

2
  • creo que tendras que generar un svg con esa forma y luego poner el botón con position: absolute;
    – hawks
    el 25 may. 2020 a las 15:15
  • gracias investigare sobre eso ahora mismo. el 25 may. 2020 a las 15:17

1 respuesta 1

2

Metiendo dos <div> más en la ecuación, y jugando con su border-radius podrías conseguir algo bastabte satisfactorio.

body {
  padding-top: 50px
}

.contenedor-forma {
  display: flex;
  flex-wrap: wrap;
}

.barra-negra {
  position: relative;
  width: 100%;
  height: 20px;
  display: flex;
  z-index: 1;
}

.forma-circulo {
  display: flex;
  width: 100%;
  justify-content: center;
  z-index: 2;
}

.barra-negra-inferior {
  width: 100%;
  height: 50px;
  background-color: #141414;
}

.barra-negra-izq {
  width: calc(50% - 20px);
  height: 31px;
  background-color: #141414;
  border-radius: 0 58px 0 0;
  margin-right: 20px;
}

.barra-negra-der {
  width: calc(50% - 20px);
  height: 31px;
  background-color: #141414;
  border-radius: 58px 0px 0 0;
  margin-left: 20px;
}

.circulo {
  position: relative;
  bottom: -29px;
  width: 50px;
  height: 50px;
  border: 5px solid #ffffff;
  border-radius: 50%;
  background-color: #ff0000;
}
<body>
  <div class="contenedor-forma">
    <div class="forma-circulo">
      <span class="circulo"></span>
    </div>
    <div class="barra-negra">
      <div class="barra-negra-izq"></div>
      <div class="barra-negra-der"></div>
    </div>
    <div class="barra-negra-inferior"></div>
  </div>
</body>

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.