You can put the image above the blue part and you apply the clip-path on it then the result will be the same as if you have created a hole inside the blue part to see the image below: body { width: 100%; height: 100vh; padding: 0; margin: 0; display: flex; } #box { margin: … Read more
This is possible if you use clip-path with an SVG-defined <clipPath> .clip-svg { clip-path: url(#myClip); } <img class=”clip-svg” src=”https://picsum.photos/id/1015/600/400″> <svg width=”0″ height=”0″> <defs> <clipPath id=”myClip”> <polygon points=”400,50 400,320, 140,300″/> <polygon points=”450,10 500,200 600,100″ /> <polygon points=”150,10 100,200 300,100″ /> </clipPath> </defs> </svg> Confirmed working in Chrome 60, Firefox 55, Edge 85. Unfortunately doesn’t work in … Read more
use inset with round property : inset(0% 45% 0% 45% round 10px)