我使用过:
http://apps.eky.hk/css-triangle-generator/
为对角放置的两个不规则三角形生成css:
左下三角
width: 0px;
height: 0px;
border-style: solid;
border-width: 317px 0 0 512px;
border-color: transparent transparent transparent #007bff;
右上三角
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 317px 512px;
border-color: transparent transparent #007bff transparent;
在这个测试jsFiddle中,两个三角形之间似乎有一条线或间隙,我一直无法摆脱它:
http://jsfiddle.net/rwone/MB5Lt/4/
编辑
解决方案似乎是将两个三角形的宽度都设置为514px,即使容器是512px。
一种解决方案是为其中一个三角形提供与边框颜色值相同的背景颜色(在本例中为#007bff
)。然后在Javascript函数中,在开始动画之前快速删除背景颜色。
更新的小提琴。