作者:手机用户2502906225 | 来源:互联网 | 2023-01-30 10:23
我想用这样的CSS剪切一个盒子的左上角.
![在此输入图像描述](https://img.php1.cn/3cd4a/1eebe/cd5/d67981797265d9c7.webp)
请记住,背景是透明的.
1> Vadim Ovchin..:
与OriDrori的答案几乎相同,但更灵活(如果你需要固定宽度的切角).
无论.card
width
和,这个渐变看起来都是一样的height
.
body {
background: purple;
}
.card {
width: 200px;
height: 200px;
background: linear-gradient(135deg, transparent 20px, white 20px);
}
2> Ori Drori..:
您可以使用简单的线性渐变:
body {
background: purple;
}
.card {
width: 200px;
height: 200px;
background: linear-gradient(to bottom right, transparent 5%, white 5%);
}