JSFiddle - React, Tailwind, and code Playground

HTML

<p>Lines with CSS</p>
		
		<input type="button" value="Draw line" onClick="createLine(0,0,20,20);" />
		<div id="page" style="height:auto;"><p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Man_o%27war_cove_near_lulworth_dorset_arp.jpg/300px-Man_o%27war_cove_near_lulworth_dorset_arp.jpg" class="fotografia" /></p></div>

CSS

div.line{
			    -webkit-transform-origin: 0 50%;
			       -moz-transform-origin: 0 50%;
			            transform-origin: 0 50%;
			                 
			    height: 5px; /* Line width of 3 */
			    background: #948C79; /* Black fill */
			    opacity: 0.5;
			    box-shadow: 0 0 8px #B99B7E;
			    
			    /* For some nice animation on the rotates: */
			    -webkit-transition: -webkit-transform 1s;
			       -moz-transition:    -moz-transform 1s;
			            transition:         transform 1s;
			  }
			  
			  div.line:hover{
			    background: #C30;
			    box-shadow: 0 0 8px #C30;
			    opacity: 1;
			  }
			  
			  div.line.active{
			    background: #666;
			    box-shadow: 0 0 8px #666;
			    opacity: 1;
			  }

JavaScript

function createLine(x1,y1, x2,y2){
				var length = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
				var angle  = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
				var transform = 'rotate('+angle+'deg)';
				var line = $('<div>')
				.appendTo('#page')
				.addClass('line')
				.css({
				  'position': 'relative',
				  'transform': transform
				    })
				    .width(length)
				    .offset({left: x1, top: y1});
				
				return line;
				} // function