使用CSS创建复杂的形状

Question

我正在尝试使用任意数量的技术创建一个像形状的梯形，以便尽可能多。形状我想创建这样的形状：

（会有里面的造型含量[IMGS & TXT]）
到目前为止，这样做的可能方式是：遮蔽（webkit的）和SVG对html内容的影响（firefox）。但我似乎无法找到任何方式使这个工作与IE和歌剧。 所以如果有人能告诉我如何做到这一点，将不胜感激。

Answer 1

使用CSS创建非矩形形状有几个选项，但它们都是黑客。这不是你通常期望使用CSS的东西。

最着名的技术是使用边框制作的三角形。这是非常黑客，并需要使用多个元素为一个单一的形状。我不会建议在生产网站上使用它。

我能想到的另一个CSS解决方案是使用极端border-radius设置来修改框的形状。这是不太冒昧，但不会在IE8和更低，因此不符合您的标准。

你说你已经尝试了SVG方法并放弃它，因为它在IE8中不起作用。值得指出的是，虽然IE不支持SVG，但它支持VML，这是一种竞争性的矢量图形格式。 SVG现在已经标准化了，所以VML将会消失，但是更老的IE将继续支持它。

因此我想要的解决方案是默认使用SVG，而在IE7/8上使用VML。好消息是有几个Javascript解决方案可以使这一切变得简单。

一个是Raphael，它允许您使用Javascript绘制SVG/VML图像。通常用于实时图形等。

也有一些解决方案，简单地将SVG转换为VML。例如http://code.google.com/p/svg2vml/。但还有其他几种可用的。

希望有所帮助。

Answer 2

正如你所建议的，屏蔽和SVG是要走的路。这些将在未来的浏览器中得到支持。如果您必须向后兼容IE浏览器，请查看IE浏览器“过滤器”的CSS（谷歌“即过滤器”）。

被预先警告：这是非常不直观的（与CSS3相比），通常是一个婊子工作。如果您的目标是使页面看起来与CSS3版本完全相同，那么将会很困难，并且您最好使用图片。