Div with a transparent cut out circle [duplicate] - css

Question

This question already has answers here:
Transparent half circle cut out of a div
(8 answers)
Closed 8 years ago.
Can I make a rectagle div with a half cut out circle using CSS? The half circle should be transparent and let the background show through.
desired CSS shape :
HTML :
<div></div>
CSS :
div{
background : #448CCB;
width:300px;
height:300px;
}

Answer 1

In order to have the white cut out circle transparent and let the background show through it, you can use box-shadows on a pseudo element to minimize markup.
In the following demo, the blue color of the shape is set with the box shadow and not the background-color property.
DEMO
output:
This can also be responsive: demo
HTML:
<div></div>
CSS:
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

Is it 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 3

Here is my 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 with 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

Answer 4

If you don't mind that the "eaten" bit is white and not transparent, yes:
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;
}