CSS Cut out circle from a rectangular shape

Question

I managed to achieve this effect: http://jsfiddle.net/6z3msdwf/1/ but I am not really happy with the markup. Also, there is an weird bug in IE 10/11 where a 1px gap is shown

Answer 1

With an inline svg it is very simple :

• a circle element
• a path element with an arc comand for the indented circle

body{background:url('http://i.imgur.com/5NK0H1e.jpg');background-size:cover;
svg{display:block;}

Or if you really want to use CSS, you can achieve the shape with the approach described in: Transparent half circle cut out of a div.
Note that the code is much longer than the svg approach:

.container{
  position:relative;
  height:250px;
  text-align:center;
}
.circle{
  position:relative;
  display:inline-block;
  width:100px; height:100px;
  background:red;
  border-radius:50%;
  z-index:2;
}
.rect{
  position:absolute;
  top:50px; left:0;
  width:100%; height:200px;
  border-radius:10px;
  overflow:hidden;
  z-index:1;
}
.rect:before{
  content:'';
  position:absolute;
  top:-60px; left:50%;
  margin-left:-60px;
  width:120px; height:120px;
  border-radius:50%;
  box-shadow:0 0 0 99999px #333;  
}

body{background:url('http://i.imgur.com/5NK0H1e.jpg');background-size:cover;