animation - 具有全高/全宽的跨浏览器三角形 div

Question

有什么方法可以在下面的 img 上显示 http://img338.imageshack.us/img338/6953/rotanim1.gif

两个全高 div 和 50% 宽。在中心 div 上是边界上的一些半径。文本覆盖在每个 div 上。当我单击链接 1 时，我想制作 jquery 动画技巧，整个右侧的白色边在左侧：0px。黑色左侧也是如此 - 然后一切都完全正确。

我尝试制作一些 -webkit-transform: (XXdeg) 但随后 div 内的整个文本也被旋转了。我尝试使用 css 边框技巧，但我认为这不是一个好主意。

这个案子有什么解决办法吗？对不起我的英语不好。希望你能理解我的想法：）

Answer 1

有许多技巧可以在 css 中使用倾斜形状（例如，参见this）。

因此，您可能可以使用 css+js 构建一个具有类似效果的解决方案，但事实是这将难以维护并且不支持轻微的进化。

在您的情况下，我建议您使用SVG或canvas。您可以使用 javascript 轻松准确地控制这两种解决方案。如果需要，您可以使用 z-index 在其上显示其他 html/css 元素。