csssassrounded-corners

How to cut box corner Using CSS with transparent background?

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.

Solution

  • 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>