How to cut a rectangle using CSS with a transparent background?

Question

I want to crop the upper left corner of the window using CSS like this.

Keep in mind that the background is transparent.

Answer 1

Almost the same solution as OriDrori's answer , but more flexible (if you need a fixed-width angle).

This gradient will look the same regardless of .card width and height .

 body { background: purple; } .card { width: 200px; height: 200px; background: linear-gradient(135deg, transparent 20px, white 20px); } 

 <div class="card"></div> 

Answer 2

To do this, you can use a simple linear gradient :

 body { background: purple; } .card { width: 200px; height: 200px; background: linear-gradient(to bottom right, transparent 5%, white 5%); } 

 <div class="card"></div> 

Answer 3

With pseudo and transform you can do this and it has good browser support (from IE9)

 body { background: url(https://picsum.photos/400/300) center / cover; } div { position: relative; width: 200px; height: 200px; overflow: hidden; } div::before { content: ''; position: absolute; left: calc(50% + 25px); /* 25px is height/width of the cut */ top: calc(50% + 25px); width: 141.5%; height: 141.5%; transform: translate(-50%,-50%) rotate(45deg); background: #eee; opacity: 0.8; } 

 <div></div> 

---

As indicated, if you need to scale it with a different aspect ratio, use this

 body { background: url(https://picsum.photos/400/300) center / cover; } div { position: relative; width: 80vw; height: 80vh; overflow: hidden; } div::before { content: ''; position: absolute; left: 0; top: 0; width: 1000%; height: 5000%; transform: rotate(45deg) translate(25px,-50%); /* 25px for the cut height/width */ transform-origin: left top; background: #eee; opacity: 0.8; } 

 <div></div> 

Answer 4

You can use the clip path https://developer.mozilla.org/en/docs/Web/CSS/clip-path

and use something like this:

 div#test{ background:red; width:200px; height: 200px; -webkit-clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 20%); clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 20%); } 

 <div id="test"></div>