Use CSS to cut out shape

Question

The effect I am trying to get is that I have a shape infront of another shape and where that shape is the background is visible. Ideally just the outline but cutting the whole shape out will be ok as I could then draw another shape inside.

Here is a snippet to show what I mean

.box{
  width: 500px;
  height: 500px;
  background-color: red;
  position: relative;
}

.inner-box{
  width: 100px;
  height: 100px;
  border: 15px solid #000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  
}

body{
  background-image: url("https://unsplash.com/photos/6-jTZysYY_U/download");
}

<div class="box"><div class="inner-box"></div></div>

Instead of the black outline I want to be able to see the background where the outline is, or have the whole square cut out.

Which browsers do you have to support? Is IE9 and lower support required? — Harry, Feb 06 '16 at 13:35
No, as long as I can set a fallback style for older browsers so it degrades nicely then its fine. — Guerrilla, Feb 06 '16 at 13:38
Does the element on top have a solid color? That is, is the red colored going to be just a colored fill (or) a gradient/image? — Harry, Feb 06 '16 at 13:45
Then it probably needs a mask (or) clip-path and those have very poor browser support (fallback would be no transparent cut). — Harry, Feb 06 '16 at 13:48

Nenad Vracar · Accepted Answer · 2016-02-06T17:06:13.637

Here is SVG approach with <mask>

html {
  height: 100%;
}

body{
  background-image: url("https://s-media-cache-ak0.pinimg.com/originals/6a/22/e3/6a22e387a2c72af177b2fa22ec71cbaa.jpg");
  margin: 0;
  padding: 0;
  height: 100%;
  background-size: cover;
}

<svg width="50%" height="70%">
   <mask x='0' y='0' id="cut">
     <rect y='0' x='0' width="100%" height='100%' fill="white"/>
     <rect y='40%' x='40%' width="15%" height='15%' stroke-width="3%" stroke="black" fill="transparent"/>
   </mask>
   <rect y='0' x='0' width="100%" height='100%' fill="#fff" mask="url(#cut)"/>
</svg>

html {
  height: 100%;
}

body{
  background-image: url("https://s-media-cache-ak0.pinimg.com/originals/6a/22/e3/6a22e387a2c72af177b2fa22ec71cbaa.jpg");
  margin: 0;
  padding: 0;
  height: 100%;
  background-size: cover;
}

<svg width="50%" height="70%">
   <mask x='0' y='0' id="cut">
     <rect y='0' x='0' width="100%" height='100%' fill="white"/>
     <rect y='35%' x='35%' width="25%" height='25%'/>
   </mask>
   <rect y='0' x='0' width="100%" height='100%' fill="#fff" mask="url(#cut)"/>
</svg>

Use CSS to cut out shape

1 Answers1