Medio círculo transparente cortado de un div

Me gustaría hacer una forma de medio círculo recortada transparente utilizando 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 debe ser transparente y dejar que se vea el fondo.

Forma deseada:

rectángulo con medio círculo cortado

Puede ser puede hacerlo con CSS :after pseudo propiedad como esta:

 .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); } 

http://jsfiddle.net/FcaVX/2/

Puede usar sombras de cuadro para hacer el círculo de corte 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; } 
 

Usando SVG:

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

  • Tiene mejor soporte de navegador en comparación con los gradientes radiales.
  • SVG puede admitir imágenes dentro de la forma a diferencia del enfoque de sombreado de caja.

Mientras que SVG no es compatible con <= IE8, mientras que la sombra de caja es, se pueden proporcionar retrocesos.

 svg { height: 150px; width: 150px; } polygon { fill: black; } /* Just for demo */ body { background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } 
                 

Puedes hacerlo muy fácilmente con un degradado radial.

MANIFESTACIÓN

Resultado :

forma

HTML :

 

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.

Kyle Sevenokas hizo un buen trabajo. Y construí de eso. Consulte el http://jsfiddle.net/FcaVX/1/

Básicamente colapsé el div blanco para el círculo y le di bordes blancos. La pregunta de OP habló sobre los elementos de colores que componen la forma; nada sobre sus fronteras ¿no?

Necesitaba esquinas redondeadas solo en la parte inferior de una imagen receptiva. Empecé desde @sandeep fiddle y lo mejoré para mis necesidades:

  .rect { height: 85vh; position: relative; background-color: red; width: 60vw; } .circle-helper{ display: block; width: 100%; padding-bottom: 50%; bottom: 0; left: 0; overflow: hidden; position: absolute; background-color: transparent; } .circle{ display: block; width: 100%; padding-bottom: 100%; // height: 500px; bottom: 0; left: 0; overflow: hidden; position: absolute; background-color: transparent; } .circle:after{ box-sizing: content-box; content: ''; width: 100%; height: 100%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: rgba(0,0,0,0); position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; border: 300px solid blue; } top: 50% left: 50% border: 300px solid blue 

https://jsfiddle.net/mop00j22/

En este momento, la única forma en que se me ocurre sería utilizar una gran cantidad de divs negros de 1 píxel, uno al lado del otro y con diferentes alturas. Es técnicamente posible de esta manera, pero debería estar profundamente mal visto. También; no tendrá anti-aliassing a menos que quiera tomarse la molestia de agregar divs de 1×1 píxeles y hacer el anti-aliassing manualmente.

Podría ser más útil si diera un ejemplo de cómo quería usar esto. ¿Por qué necesita ser negro / transparente solamente? Como dice omarello, la mejor solución en la mayoría de las circunstancias es probablemente una imagen simple GIF o PNG con transparencia.