css - 使用 CSS 创建复杂的形状

Question

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

(形状里面会有内容[imgs & txt])
到目前为止，可能的做法是:屏蔽 (webkit) 和对 html 内容 (firefox) 的 SVG 效果。但我似乎无法找到任何方法来使它与 IE 和 Opera 一起工作。所以如果有人能告诉我如何做到这一点，我将不胜感激。

Answer 1

有一些选项可以使用 CSS 创建非矩形形状，但它们都是 hack。这不是您通常期望使用 CSS 执行的操作。

最著名的技术是使用边框制作三 Angular 形。这在很大程度上是一种 hack，并且需要为单个形状使用多个元素。我不建议在生产站点上使用它。

我能想到的另一个 CSS 解决方案是使用极端的 border-radius 设置来修改框的形状。这不那么 hacky，但在 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/ .但还有其他几个可用。

希望对您有所帮助。