如何仅通过 border 实现带有单角颜色的 div？

通过边框实现 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);
}

效果预览：

[codepen demo](https://codepen.io/xboxyan/pen/pexzbj)

以上就是如何仅通过 border 实现带有单角颜色的 div？的详细内容，更多请关注其它相关文章！