Div with a transparent cut out circle
css, css-shapes
Solution
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;
}
Problem
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; } ```