如何用单个 div 实现角颜色效果？

发布日期： 2024-10-27 阅读量： 作者： 网络

如何用单个 div 实现角颜色效果？

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

这个问题询问了如何通过 border 样式来实现上图中左上角或右上角的样式，要求只使用一个 div，而不是使用两个 div 通过背景色和圆角组合实现。

答案：

可以使用足够大的 box-shadow 和 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);
}

随便看看