首页　>　文章列表　>　如何仅用一个 DIV 通过 border 设置特定角颜色的效果？

如何仅用一个 DIV 通过 border 设置特定角颜色的效果？

190 2025-03-25

通过 css border 实现 div 角颜色

如何在只使用一个 div 元素的情况下，通过 border 样式设置右上角或左上角颜色的效果？

答案

为了实现这种情况，需要启用 div 上的 border 样式，并提供足够大的 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);
}

示例效果如下：

[图片链接]

通过这种方法，可以仅使用一个 div 元素创建具有所需角颜色的效果，同时保持圆角的外观。

来源：1729554499

本类最新