
通过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 的裁剪下,仅显示上半部分阴影,形成角颜色的效果。










