如何剪切框角使用具有透明背景的CSS？

我想用这样的CSS剪切一个盒子的左上角.

请记住,背景是透明的.

与OriDrori的答案几乎相同,但更灵活(如果你需要固定宽度的切角).

无论.card width和,这个渐变看起来都是一样的height.

body {
  background: purple;
}

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

body {
  background: purple;
}

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