Clip path inset circle?

Question

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?

Answer 1

You can create hole in clip-path with this approach:

let precision = 64;
let radius = 25;
let c = [...Array(precision)].map((_, i) => {
  let a = -i/(precision-1)*Math.PI*2;
  let x = Math.cos(a)*radius + 50;
  let y = Math.sin(a)*radius + 50;
  return `${x}% ${y}%`
})

document.querySelector('div').style.clipPath = 
 `polygon(100% 50%, 100% 100%, 0 100%, 0 0, 100% 0, 100% 50%, ${c.join(',')})`;

div {
  background: blue;
  width: 200px;
  height: 200px;
}

or symply use resulting clip string:

div {
      background: blue;
      width: 200px;
      height: 200px;
    }