How to cut box corner Using CSS with transparent background?

Question

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

keep in mind that background is transparent.

Answer 1

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>

Answer 2

You can use a simple linear gradient for that:

body {
  background: purple;
}

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

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