如何仅用一个div，通过border样式实现图片左上角和右上角的角颜色？

通过border让div展现角颜色

问题：

如何仅使用一个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);
}

效果展示：

[CodePen示例](https://codepen.io/xboxyan/pen/gxywBJ)

说明：

• border-radius 设置圆角。
• box-shadow 绘制阴影，但在 clip-path 的裁剪下，仅显示上半部分阴影，形成角颜色的效果。

以上就是如何仅用一个div，通过border样式实现图片左上角和右上角的角颜色？的详细内容，更多请关注其它相关文章！