css - CSS 右侧的 div 弯曲（提供的示例图片）

Question

我正在尝试在 div 上使用 CSS（不是图像，只是具有背景颜色的 div）：

如果您看到上面的示例图像并向右看，这就是我需要做的，没有图像。

我怎么能用css做到这一点？

标签： css

Answer 1

使用带有插图的盒子阴影似乎可以实现这一点（大多数浏览器都广泛支持它：https ://caniuse.com/mdn-css_properties_box-shadow_inset ）。您还可以添加border-top-right-radius 和border-bottom-right-radius 来给角落一个曲线。

.grey-box {
    background: #ccc;
    height: 200px;
    width: 200px
}

.right-curve-shadow {
    box-shadow: inset -20px 0 15px -15px rgba(50, 50, 50, 0.5);
}

.right-side-radius {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

<div class="grey-box right-curve-shadow right-side-radius">
</div>

您可以使用颜色（ rgba(50, 50, 50, 0.5) 到另一个值）以及框阴影的偏移量/散布。

有关更多信息，请参见此处： 如何仅在一侧创建插入框阴影？