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.
How to remove line between two diagonally opposite css scalene triangles?
-
26-06-2022 - |
Question
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
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow