如何使用 CSS 设置 div 左上角的形状？

如果你想让你的 div 具有独特的造型，你可以使用 CSS 来设置它的左上角形状。以下是一些实现方法。

1. 使用 border-radius 属性

border-radius 属性可用于使一个矩形的角变圆。如果你只想让左上角变圆，可以将 border-radius 应用于左上角的角上，其他角的值都设为 0。

div {
  border-top-left-radius: 20px;
}

2. 使用 clip-path 属性

clip-path 属性可用于裁剪元素的形状。你可以使用 polygon() 函数来定义输入的形状，具体来说，你可以指定每个点的 x 和 y 值。

div {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}

3. 使用 transform 属性

transform 属性可用于变换元素的形状。你可以使用 skew() 函数来使元素倾斜，然后使用 translate() 函数将它移到左上角。

div {
  transform: skew(-20deg) translate(-20px, -20px);
}

无论你选择哪种方法，都可以让你的 div 具有独特的形状。