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

Question

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

请记住,背景是透明的.

Answer 1

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

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

body {
  background: purple;
}

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

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

Answer 2

您可以使用简单的线性渐变:

body {
  background: purple;
}

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

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

Answer 3

您可以使用剪辑路径 https://developer.mozilla.org/en/docs/Web/CSS/clip-path

并使用这样的东西：

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>