Div with a transparent cut out circle

Question

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