5

Deseo crear está forma, deseo sustraer relleno de la parte izquierda. Es importante que pueda sustraer, ya que si pongo un circulo encima no me serviría si el fondo es una imagen. ¿Cómo podría hacerlo?

introducir la descripción de la imagen aquí

2 respuestas 2

11

Puedes utilizar un div cuyo overflow:hidden + un pseudo-elemento ::before, transparente con un box-shadow azul.

#libro {
  width: 150px;
  height: 50px;
  border-radius: 0 25px 25px 0;
  position: relative;
  overflow: hidden;
}

#libro::before {
  content: "";
  display: inline-block;
  background: transparent;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  position: relative;
  left: -25px;
  top: -5px;
  box-shadow: 0 0 0 150px blue;
}

body {
  background: gold;
  background-image: url(http://lorempixel.com/400/200/sports/1/);
  background-repeat: no-repeat;
  background-position: 25px 25px;
}
<div id="libro"></div>

1
  • 1
    WOW, excelente, no se me habría ocurrido. Gracias por darme a conocer este truquillo. Commented el 17 sept. 2018 a las 21:51
3

Podrías usar clip-path con un círculo para recortar la parte izquierda. Aunque, la verdad, la solución de enxaneta es mejor y más ingeniosa (no vas a necesitar un elemento SVG) y va a tener más soporte (clip-path no funciona en IE o Edge).

Pero aquí lo dejo como referencia:

#clip {
  width: 200px;
  height: 60px;
  border-radius: 0 60px 60px 0;
  background: #9be;
  clip-path: url("#mipath");
}

body {
  background: url("https://lorempixel.com/600/400/cats");
  background-size: cover;
}
<svg height="0" width="0" viewBox="0 0 200,60">
  <defs>
    <clipPath id="mipath">
      <path d="M 0,0 200,0 200,60 0,60 M -40,30 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0 " />
    </clipPath>
  </defs>
</svg>

<div id="clip"></div>

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.