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

一分耕耘，一分收获！既然都打开这篇《如何仅通过 border 实现带有单角颜色的 div？》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

如何仅通过 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？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在米云公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

版本声明本文转载于：php 如有侵犯，请联系删除

近期文章