title: Clip path inset circle?
body: <p>Is it possible to create an inset circle clip path so that the clip path would effectively cut a hole through the div in the center opposed to only showing the center? </p>
  
  <p>The div should all be shown apart from a hole cut out in the center to create something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/6FOaY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6FOaY.png" alt="cut out circle"></a></p>
  
  <p>I would like to use clip path or something similar so that I can have stuff (images and content) behind the div and the clip path will be used to reveal this. So the div (blue div from my jsfiddle) will disappear from the center using a transition to show the content behind it.
  <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    background: blue;
    width: 200px;
    height: 200px;
    -webkit-clip-path: circle(50px at center);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/pm4yvbxn/" rel="noreferrer">https://jsfiddle.net/pm4yvbxn/</a></p>