Responsive design CSS3中的曲线边

我在一个网站上工作，有一个非常独特的幻灯片

如您所见，图像顶部需要以一种奇怪的方式弯曲，然后融入背景。目前，这只是设置为一个叠加的

，与主背景图像对齐，但由于该站点是响应性的，所以在某些分辨率下，事情会变得很奇怪

有没有办法使用CSS来达到同样的效果？我一直在试验边界半径，但我不确定这是否可行。如果它不是100%的跨浏览器，我甚至会很高兴，因为它可以降级为一个直尺

---

谢谢。

我已经使用SVG作为分区分隔器做了一些工作

其想法是在节上方放置一个SVG，它应该“剪裁”并使用负边距（或

top

属性）将分隔符降低到节上。该部分可以有一个bg图像来实现此效果

在本演示中，我使用了100%宽度分隔符：

警告一句：在这个演示中使用100%的分隔符，你可能会从下面的图像中得到一些“出血”。它发生在FF中，当时我正在对JSFIDLE进行原型设计。如果没有一些粗糙的宽度/边距，我真的无法缓解这种情况

希望它能为你指明正确的方向

编辑： 为了进一步说明我的答案，还有一些其他方法可以剪裁/遮罩元素。以下是我在寻找解决方案时查阅的一些资源：

---

大多数剪辑/遮罩属性都不兼容跨浏览器，因此仅在可以返回到完整的无遮罩图像的情况下使用。

您可以使用css 3的属性：

transform:rotate(10deg);
border-radius:7px;
box-shadow:4px 5px 6px #DDD;

---

它将为图像和视觉内容创造良好的吸引力。祝你好运

您应该使用svg（可缩放矢量图形）查找html。那可能就是你要找的。听起来像我要找的。谢谢您知道如何将SVG文件转换为剪辑路径吗？我似乎不明白。