Draw a line (path) from pure CSS from one point to another

Question

I have an image animation on this path below and would like the path to be visible.

CSS

div { width:10px; height:10px; background:red; position:relative; -webkit-animation-name:Player1; -webkit-animation-duration:100s; -webkit-animation-timing-function:cubic-bezier(0.1,0.1,0.1,0.1); -webkit-animation-delay:2s; -webkit-animation-iteration-count:5; -webkit-animation-direction:normal; -webkit-animation-play-state:running } @-webkit-keyframes Player1 { 0% { background:red; left:20px; top:20px } 25% { background:#ff0; left:800px; top:200px } 50% { background:blue; left:950px; top:500px } 75% { background:green; left:0; top:800px } 100% { background:red; left:0; top:0 } } 

HTML

 <div></div> 

Here is the fiddle.

Is it possible to have a line connecting them only with css code? and if you hadn't helped me with the code?

Answer 1

This is obviously for SVG (structured vector graphics).

 <svg> <polyline points="20,20 800,200 950,500 0,800 0,0"></polyline> </svg> 

A working example is here .

Or at a useful rate here .

Answer 2

You can calculate the angle and distance between the points and use CSS Transforms to display the line you want. Here's the jsfiddle . This is a little rude, but I think you get this idea.

 var startPoint=[200,200], endPoint=[300,300], rise=endPoint[1]-startPoint[1], run=endPoint[0]-startPoint[0], slope=rise/run, DEGREES=57.2957795, width=Math.sqrt((rise*rise)+(run*run)); var line=document.getElementById('line'); line.style.top=startPoint[0]+'px'; line.style.left=startPoint[1]+'px'; line.style.width=width+"px"; line.style.transform= "rotate("+(Math.atan(slope)*DEGREES)+"deg)"; line.style.transformOrigin= "0 0";