Div con un cerchio ritagliato trasparente

Question

Posso creare un rettangolo div con un cerchio mezzo tagliato utilizzando CSS? Il semicerchio dovrebbe essere trasparente e lasciare trasparire lo sfondo.

forma CSS desiderata:

HTML:

<div></div> 

CSS:

div{ 
    background : #448CCB; 
    width:300px; 
    height:300px; 
} 

Answer 1

al fine di avere il bianco tagliato cerchio trasparente e lascia che lo sfondo lo mostri, puoi usare box-shadows su uno pseudo elemento per ridurre al minimo il markup.

Nella seguente demo, il colore blu della forma è impostato con l'ombra casella e non con la proprietà .

DEMO

uscita:

Questo può anche essere sensibile: demo

HTML:

<div></div> 

CS:

div{ 
    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 #448CCB; 
} 

Answer 2

Se non ti dispiace che il " mangiato" bit è bianco e non trasparente, sì:

http://jsfiddle.net/tWbx5/2/

<div></div> 

CSS:

div { 
    width: 250px; 
    height: 250px; 
    margin: 10px; 
    background: #448CCB; 
} 

div:before { 
    content:" "; 
    background:white; 
    display: block; 
    width:250px; 
    height: 125px; 
    border-radius: 0 0 125px 125px; 
} 

Answer 3

E 'okey?

Demo

div{ 
    width:100px; 
    height:100px; 
    background:#03b0d5; 
    display:block; 
    position:relative; 
    overflow:hidden; 
} 
div:after{ 
    width:100px; 
    height:100px; 
    border-radius:50%; 
    background:#fff; 
    display:block; 
    position:absolute; 
    content:''; 
    top:-50px; 
    left:0; 
} 

Answer 4

Ecco il mio sollution

HTML:

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

CSS:

#shape { 
    width:250px; 
    height:250px; 
    background:#448ccb; 
    position:relative; 
} 

#shape:before { 
    content:" "; 
    position:absolute; 
    width:250px; 
    height:250px; 
    background:#fff; 
    left:0; top:-50%; 
    border-radius:50%; 
} 

Link in jsfiddler: demo

solition con box-shadow:

HTML:

<div id="wrap"> 
    <div id="shape"></div> 
</div> 

CSS:

#wrap { 
    background:#ccc; 
    padding:20px; 
} 
#shape { 
    width:250px; 
    height:250px;  
    position:relative; 
    overflow:hidden; 
} 

#shape:before { 
    content:" "; 
    position:absolute; 
    width:100%; 
    height:100%; 
    left:0; top:-50%; 
    border-radius:50%; 
    box-shadow:0 0px 0 250px #448ccb 
} 

Link in jsfiddler: demo