如何使用 border 自定义 div 左上角或右上角颜色？

如何用 border 实现 div 角颜色？

要使用 border 样式设置 div 的左上角或右上角颜色，并在不使用两个 div 的情况下实现此样式，可以通过以下方式：

方法：

利用足够大的 box-shadow 和 clip-path 裁剪来实现。

css 代码：

.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);
}

原理：

• box-shadow 创建一个超出 div 边界的阴影，在左上角或右上角留下一个彩色区域。
• clip-path 将超出 div 边界的阴影裁剪掉，只保留左上角或右上角的彩色区域。

效果预览：

[codepen 示例](https://codepen.io/xboxyan/pe...)

注：

这种方法创建的阴影会随着 div 尺寸的变化而缩放，因此，为了得到一致的效果，建议将 div 的尺寸固定。

以上就是如何使用 border 自定义 div 左上角或右上角颜色？的详细内容，更多请关注其它相关文章！