如何删除两个对角相对的css斜角三角形之间的线?

时间:2013-08-26 10:05:13

标签: css shape css-shapes

我用过:

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。

1 个答案:

答案 0 :(得分:1)

一种解决方案是给其中一个三角形一个背景颜色,其值与边框颜色相同(在本例中为#007bff)。然后在Javascript函数中,在开始动画之前快速删除背景颜色。

Updated fiddle