Semicírculo transparente cortado de un div

Me gustaría hacer una forma de semicírculo recortada transparente usando solo CSS3. El único requisito es que todos los elementos que forman la forma deben ser negros o transparentes .

No puedo usar un rectángulo negro con un círculo blanco encima porque el semicírculo tiene que ser transparente y dejar que se vea el fondo.

Forma deseada:

rectángulo con medio círculo recortado

Dec 14 '11 18:12 user852974

Es posible hacerlo con ::afteruna pseudopropiedad CSS como esta:

body {
  background: green;
}

.rect {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  margin-top: 100px;
  margin-left: 100px;
}

.circle {
  display: block;
  width: 100px;
  height: 50px;
  top: -50px;
  left: 0;
  overflow: hidden;
  position: absolute;
}

.circle::after {
  content: '';
  width: 100px;
  height: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  top: -100px;
  left: -40px;
  border: 40px solid rgba(0, 0, 0, 0.5);
}

<div class="rect">&nbsp;<span class="circle"></span></div>

Expandir fragmento

Ver en JSFiddle

Dec 14 '2011 11:12 sandeep

Puedes usar sombras de cuadro para hacer el círculo recortado transparente :

body {
  background: url(http://i.imgur.com/qi5FGET.jpg) no-repeat;
  background-size: cover;
}
div {
  display: inline-block;
  width: 300px; height: 300px;
  position: relative;
  overflow: hidden;
}
div:before {
  content: '';
  position: absolute;
  bottom: 50%;
  width: 100%; height: 100%;
  border-radius: 100%;
  box-shadow: 0px 300px 0px 300px #000;
}
.transparent {
  opacity: 0.5;
}

<div></div>
<div class="transparent"></div>

Expandir fragmento

Semicírculo recortado transparente

Esto puede responder con longitudes porcentuales:

Mostrar fragmento de código

body {
  background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg) no-repeat;
  background-size: cover;
}
div {
  width: 40%; height: 300px;
  position: relative;
  overflow: hidden;
}
div:before {
  content: '';
  position: absolute;
  bottom: 50%;
  width: 100%; height: 100%;
  border-radius: 100%;
  box-shadow: 0px 300px 0px 300px #000;
}
.transparent {
  opacity: 0.5;
}

<div class="transparent"></div>

Expand snippet

Jul 16 '2014 16:07 web-tiki

Usando SVG:

Aquí hay una solución alternativa que usa SVG (aunque no la haya etiquetado). Las ventajas de usar SVG son:

Tiene una mejor compatibilidad con el navegador en comparación con los gradientes radiales.
SVG puede admitir imágenes dentro de la forma, a diferencia del enfoque de cuadro de sombra.

Si bien SVG no es compatible con <= IE8, mientras que box-shadow sí lo es, se pueden proporcionar alternativas.

Mostrar fragmento de código

svg {
  height: 150px;
  width: 150px;
}
polygon {
  fill: black;
}

/* Just for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<!-- Sample 1 - Using Clip Path -->
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
  <defs>
    <clipPath id='clipper'>
      <path d='M0,0 a50,50 0 1,0 100,0 l 0,100 -100,0' />
    </clipPath>
  </defs>
  <polygon points='0,0 100,0 100,100 0,100' clip-path='url(#clipper)' />
</svg>

<!-- Sample 2 - Using Path -->
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
  <pattern id='bg' width='100' height='100' patternUnits='userSpaceOnUse'>
    <image xlink:href='http://lorempixel.com/100/100/nature/1' height='100' width='100' />
  </pattern>
  <path d='M0,0 a50,50 0 1,0 100,0 l 0,100 -100,0 0,-100' fill='url(#bg)' />
</svg>

Expand snippet

Usando CSS:

CSS también tiene clip-pathespecificaciones y podemos probar algo como el siguiente fragmento.

Mostrar fragmento de código

.shape {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: purple;
}
.shape:after {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: white;
  -webkit-clip-path: ellipse(50% 20% at 50% 0%);
  clip-path: ellipse(50% 20% at 50% 5%);
}

.shape.image{
  background: url(http://lorempixel.com/100/100);
}

#shape-2 {
  width: 100px;
  height: 100px;
  background-color: purple;
  -webkit-clip-path: ellipse(50% 20% at 50% 20%);
  clip-path: ellipse(50% 20% at 50% 20%);
}

/* Just for demo */

.shape{
  float: left;
  margin: 20px;
}
#shape-2 {
  margin: 150px 20px 0px;
}

<div class="shape"></div>
<div class="shape image"></div>
<br/>

<div id="shape-2"></div>

Expand snippet

Pero a diferencia de la ruta de clip SVG, la versión CSS pura (es decir, sin utilizar un SVG en línea o externo) no parece ser capaz de admitir un archivo path. Solo admite formas y, por lo tanto, en este caso, si usa clip-pathdirectamente en el padre, solo producirá una elipse (como se muestra en el fragmento). Para superar esto, tendríamos que colocar la ruta del clip en un elemento secundario (o en un pseudoelemento) y esto significaría que el área recortada no sería transparente .

Usando lienzo:

Lo mismo se puede hacer también usando Canvas. Los comandos de Canvas son bastante similares a SVG y sus ventajas también son bastante similares. Sin embargo, Canvas se basa en ráster y, por lo tanto, no se escala tan bien como SVG.

Mostrar fragmento de código

window.onload = function() {
  /* Canvas example with path */
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.src = 'http://lorempixel.com/150/300';
    ctx.beginPath();
    ctx.moveTo(110, 0);
    ctx.arc(60, 0, 50, 0, 3.14, false);
    ctx.lineTo(10, 145);
    ctx.lineTo(110, 145);
    ctx.closePath();
    ctx.fill();
    /* Use below for using image as a fill */
    /*img.onload = function(){
        var ptrn = ctx.createPattern(img,'no-repeat');
        ctx.fillStyle = ptrn;
        ctx.fill();
    }*/
  }

  /* Canvas example with clip path */
  var canvasClip = document.getElementById('canvas-clip');
  if (canvasClip.getContext) {
    var ctxClip = canvasClip.getContext('2d');
    ctxClip.beginPath();
    ctxClip.moveTo(10, 145);
    ctxClip.lineTo(10, 0);
    ctxClip.arc(60, 0, 50, 0, Math.PI * 2, true);
    ctxClip.lineTo(110, 145);
    ctxClip.lineTo(10, 145);
    ctxClip.clip();
    ctxClip.fillStyle = 'tomato';
    ctxClip.fill();
  }
}

canvas {
  height: 150px;
  width: 300px;
}
/* Just for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<canvas id='canvas'></canvas>
<canvas id='canvas-clip'></canvas>

Expand snippet

Usando máscaras :

Esta forma también se puede crear usando máscaras CSS (o) SVG. Las máscaras CSS tienen muy poco soporte y actualmente solo funcionan en navegadores con Webkit, pero las máscaras SVG tienen un soporte mucho mejor y deberían funcionar en IE9+.

Mostrar fragmento de código

/* CSS Mask */

.shape {
  width: 150px;
  height: 150px;
  background-color: black;
  -webkit-mask-image: radial-gradient(circle closest-corner at 50% 0%, transparent 98%, white 99%);
  mask-image: radial-gradient(circle closest-corner at 50% 0%, transparent 98%, white 99%);
}

/* End of CSS Mask */

svg {
  height: 150px;
  width: 150px;
}
polygon#shape {
  fill: black;
  mask: url(#masker);
}
/* Just for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<!-- CSS Mask -->

<div class='shape'></div>

<!-- SVG Mask -->
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
  <defs>
    <mask id='masker' x='0' y='0' width='100' height='100'>
      <polygon points='0,0 100,0 100,100 0,100' fill='#fff' />
      <circle r='50' cx='50' cy='0' fill='#000' />
    </mask>
  </defs>
  <polygon points='0,0 100,0 100,100 0,100' id='shape' />
</svg>

Expand snippet

Jun 09 '2015 08:06 Harry

Puedes hacerlo muy fácilmente con un degradado radial.

MANIFESTACIÓN

Resultado :

forma

HTML :

<div class='shape'></div>

CSS relevante :

.shape {
  margin: 0 auto;
  width: 10em; height: 16em;
  /* WebKit browsers, old syntax */
  background: -webkit-radial-gradient(50% 0, circle, transparent 30%, black 30%);
  
  /* IE10, current versions of Firefox and Opera */
  background: radial-gradient(circle at 50% 0, transparent 30%, black 30%);
}

Consulte http://caniuse.com/#feat=css-gradients para obtener información detallada sobre la compatibilidad.

Feb 15 '2013 05:02 Ana