CSS3中的曲面

Question

我正在开发一个有着独特幻灯片的网站......

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

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

感谢。

Answer 1

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

我们的想法是将SVG置于应该“剪辑”的部分之上，并使用负边距（或top属性）将分隔符降低到该部分。该部分可以有一个bg图像来实现这种效果。

在本演示中，我使用了100％宽度分隔符：http://jsfiddle.net/fmpeyton/NuneR/

提醒一句：使用此演示中的100％分隔符，您可能会从下方的图像中获得一些“流血”。当我正在为JSfiddle进行原型设计时，它发生在FF中。如果没有一些粗糙的宽度/边距，我真的无法减轻这种情况。

希望它指出你正确的方向。

编辑：

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

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

大多数裁剪/屏蔽属性不是跨浏览器兼容的，因此仅在您可以回退到完整的未屏蔽图像的情况下使用。

Answer 2

您可以将属性用于css 3：

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

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