6

Buena tarde a toda la comunidad.

Existe forma de realizar esta pestaña solo con CSS?

Pestaña

He intentado utilizar un circulo como base y en after y before igual, circulos pero no puedo obtener la forma correcta.

.scroller {
        width: 80px;
        height: 80px;
        position: absolute;
        top: -40px;
        background-color: $secondary;
        border-radius: 100%;
        &:before {
            content: '';
            width: 80px;
            height: 80px;
            border-radius: 100%;
            position: absolute;
            left: -30px;
            bottom: -18px;
            border: 40px solid rgba($secondary, 0.5);
        }
    }
1
  • 1
    Hola Itzli, sería ideal que añadieras también el código HTML (y el CSS generado por SASS), de ese modo podremos ayudarte con tu problema específico. Lee sobre cómo crear un ejemplo mínimo verificable para más información.
    – Alvaro Montoro
    el 1 dic. 2019 a las 21:52

1 respuesta 1

11

Primero, necesitas un contenedor que oculte la parte inferior del círculo. La barra azul no puede porque si oculta el overflow lo haría tanto hacia abajo como hacia arriba.

Segundo, sea lo que sea $secondary no puede ser un color plano porque luego lo usas como rgba que espera 3 números separados por comas.

El siguiente ejemplo tiene un círculo hecho con puro CSS, donde no está el spline de tu imagen y la unión del círculo acá es en la práctica una esquina.

Después puse un ejemplo usando un path SVG, que ya es más elaborado. Pero tú lo podrías hacer incluso con una imagen de fondo.

.container {
  width: 100%;
  height: 65px;
  left: 0;
  overflow: hidden;
  position: absolute;
}

.scroller {
  width: 100%;
  height: 30px;
  overflow-y: show;
  position: absolute;
  bottom: 0;
  background-color: blue;
  color: white;
}
.container > b {
position:relative;
left:5px;
top:15px;
}
.circle.scroller:before {
  content: '';
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: -15px;
  left: 50%;
  margin-left: -50px;
  background-color: blue;
}

#svgbg {
  width: 100px;
  height: 18px;
  left: 50%;
  bottom: 17px;
  position: relative;
  margin-left: -50px;
  opacity: 1;
  fill-opacity: 1;
  fill-rule: evenodd;
  stroke: none;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: none;
  stroke-opacity: 1
}

.chevrondown {
  margin: auto;
  width: 20px;
  height: 20px;
  font-size: 32px;
  color: white;
  position: absolute;
  z-index: 1000;
  left: 50%;
  bottom: 38px;
  margin-left: -10px;
  font-weight: bolder;
  font-family: sans-serif;
}

.chevrondown:hover {
  fill: red;
  color: red;
  cursor: pointer;
}

.clip-svg {
  width: 100%;
  top: 0;
  position: fixed;
  height: 0;
}

.clippath_member {
  fill-opacity: 1;
  fill-rule: nonzero;
  stroke: none;
}

.scroller.clipped {
  height: 45px;
  clip-path: url(#bezier_clip_path);
}
<svg class="clip-svg">
    <defs>
      <path
        id="path2"
        class="clippath_member"
        d="M 0,18 H 100 V 17 H 99.98991 C 79.35169,17 70.004651,0 50.549894,0 31.095137,0 18.262537,17 0.100898,17 H 0 Z"
      />
      <rect
        id="rectangulo"
        width="100%"
        height="55"
        x="0"
        y="17"
        class="clippath_member"
      />
      <clipPath id="bezier_clip_path">
        <use href="#path2" x="50%" transform="translate(-50,0)" />
        <use href="#rectangulo" />
      </clipPath>
    </defs>
  </svg>
  <div class="container" style=" top: 0;">
   <b>Yo uso un seudoselector</b>
    <a class="chevrondown">⌵</a>
    <div class="scroller circle">
    
    </div>
  </div>

  <div class="container" style=" top: 66px;">
  <b>Yo uso un svg inline</b>
    <a class="chevrondown">⌵</a>
    <div class="scroller">
      <svg id="svgbg" viewBox="0 0 100 18">
        <use xlink:href="#path2" fill="#0000ff"></use>
      </svg>
    </div>
    
  </div>

  <div class="container" style=" top: 131px;">
    <b>Yo uso un clip path svg</b>

    <a class="chevrondown">⌵</a>
    <div class="scroller clipped"></div>
  </div>

Nótese que el chevron-down lo pongo en otro seudoselector, dado que si fuera el content del círculo no podrías modificar su posición vertical exactamente a tu gusto

Edit 1: puse el chevron down como link, es más fácil de manipular.

Edit 2: el spline en la unión lo hice con SVG, no es de lo más conveniente y es mejor usar un editor como inkscape.

Edit 3: dejé un tercer ejemplo usando clip-path.

8
  • Gracias por la respuesta. En efecto $secondary es un color, estoy utilizando SASS, lo que no he podido solucionar es dar el efecto ondulado a los laterales del circulo. Si ves la imagen, no es un semicirculo, sino que tiene una especie de curvas. el 1 dic. 2019 a las 20:10
  • Hice las curvas con un SVG. ejecuta mi snippet ahora
    – ffflabs
    el 1 dic. 2019 a las 21:24
  • 1
    La opción de SVG va a ser la mejor en este caso (hasta que los navegadores den soporte a clip-path con un path). Si quieres tener el código HTML más limpio, puedes poner el SVG como imagen de fondo inline en CSS.
    – Alvaro Montoro
    el 1 dic. 2019 a las 21:53
  • Muchas gracias! Funcionó muy bien el 2 dic. 2019 a las 0:20
  • @AlvaroMontoro agregué una solución con clip-path, pero requiere un par de trucos para manipular el posicionamiento y no uso directamente el path sino una composición de éste y un rectángulo
    – ffflabs
    el 4 dic. 2019 a las 12:47

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.