responsive-design - CSS3 中的曲线边

Question

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

如您所见，图像的顶部需要以一种奇怪的方式 flex ，然后融入背景。目前，这只是设置为覆盖 <div>与主要背景图像对齐，但由于该网站是响应式的，因此在某些分辨率下会变得很奇怪。

有什么方法可以使用 CSS 来实现同样的效果吗？我一直在试验 border-radius，但不确定是否可行。如果它不是 100% 跨浏览器，我什至会很高兴，因为它可能会降级为直边。

谢谢。

Answer 1

我已经完成了一些使用 SVG 作为部分分隔符的工作。

想法是将 SVG 放置在它应该“剪辑”的部分上方，并使用负边距(或 top 属性)将分隔符降低到该部分。该部分可以有背景图像来实现此效果。

在此演示中，我使用了 100% 宽度的分隔符:http://jsfiddle.net/fmpeyton/NuneR/

请注意:使用像本演示中那样的 100% 分隔符，您可能会从下面的图像中看到一些“渗色”。当我为 JSfiddle 制作原型(prototype)时，它发生在 FF 中。如果没有一些棘手的宽度/边距，我真的无法缓解这个问题。

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

编辑:

为了扩展我的答案，还有一些其他方法可以剪辑/屏蔽元素。以下是我在寻找解决方案时一直在寻找的一些资源:

• http://www.hongkiat.com/blog/css-masking/
• http://www.html5rocks.com/en/tutorials/masking/adobe/

大部分裁剪/ mask 属性都不是跨浏览器兼容的，因此请仅在可以回退到完整的未 mask 图像的情况下使用。