Search code examples
cssshapescss-shapes

How to remove line between two diagonally opposite css scalene triangles?

I have used:

http://apps.eky.hk/css-triangle-generator/

to generate the css for two scalene triangles that are placed diagonally opposite each other:

Bottom Left Triangle

width: 0px;
height: 0px;
border-style: solid;
border-width: 317px 0 0 512px;
border-color: transparent transparent transparent #007bff;

Top Right Triangle

width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 317px 512px;
border-color: transparent transparent #007bff transparent;

In this test jsFiddle though, there seems to be a line or gap between the two triangles and I haven't been able to get rid of it:

http://jsfiddle.net/rwone/MB5Lt/4/

Edit

Solution seems to be to make the width of both triangles 514px, even though the container is 512px.

Solution

  • One solution is to give one of the triangles a background color with the same value as the border color (in this case, #007bff). Then in the Javascript function, quickly remove the background colour before starting the animation.

    Updated fiddle.