如何仅使用 border 实现 div 角颜色？

如何仅使用 border 实现 div 角颜色

您想获取一个 div 的一角的颜色，只使用 border 样式，而不是使用两个 div 设置背景色和圆角。我们通过以下步骤解决此问题：

1. 设置大尺寸的 box-shadow：使用 box-shadow 在角上创建阴影，使其足够大，以覆盖所需的区域。
2. 使用 clip-path 裁剪：使用 clip-path 将多余的阴影裁剪掉，只留下角上的所需阴影。

以下代码演示了此方法：

.box {
  border: 1px solid red;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 0 0 10px red;
  clip-path: inset(0 0 0 0);
}

此代码将在 div 的左上角创建一个红色的阴影角。