How to cut box corner Using CSS with transparent background?

Amir Ur Rehman picture Amir Ur Rehman · Jul 9, 2017 · Viewed 7.3k times · Source

I want to cut left top corner of a box using CSS like this.

enter image description here

keep in mind that background is transparent.

Answer

Vadim Ovchinnikov picture Vadim Ovchinnikov · Jul 9, 2017

Nearly the same solution as OriDrori's answer but more flexible (if you need fixed-width cutted corner).

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>