跨浏览器三角形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元素。