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?
2 respuestas
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>
-
1WOW, excelente, no se me habría ocurrido. Gracias por darme a conocer este truquillo. Commented el 17 sept. 2018 a las 21:51
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>