使用CSS创建复杂的形状

Question

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

（形状内有内容[imgs＆amp; txt]）
到目前为止，可能的方法是：屏蔽（webkit）和SVG对html内容的影响（firefox）。但我似乎无法找到任何方法使这项工作与IE和歌剧。 所以如果有人能告诉我如何做到这一点，我们将不胜感激。

Answer 1

使用CSS创建非矩形形状有几个选项，但它们都是黑客。这不是您通常希望使用CSS做的事情。

最着名的技术是使用边框制作的三角形。这非常糟糕，需要为单个形状使用多个元素。我不建议在生产现场使用它。

我能想到的另一个CSS解决方案是使用极端border-radius设置来修改框的形状。这样不那么hacky，但在IE8及更低版本中不起作用，因此不符合你的标准。

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

因此，我采用的解决方案是默认使用SVG，而使用VML代替IE7 / 8。好消息是有几个Javascript解决方案可以让这很容易。

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

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

希望有所帮助。

Answer 2

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

预先警告：与CSS3相比，它非常不直观，并且通常是一个可以使用的婊子。如果您的目标是使页面看起来与CSS3版本完全相同，那么使用图像可能会更加困难。