旋转div，左边缘和右边缘倾斜/切回平行

Question

I use this function to rotate div:

function connect(x1,y1,x2,y2,color,thickness) {
    var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));// distance
    var cx = ((x1 + x2) / 2) - (length / 2);// center
    var cy = ((y1 + y2) / 2) - (thickness / 2);// center
    var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);// angle
    var htmlLine = '<div style="height:'+thickness+'px; background-color:'+color+';line-height:1px;position:absolute;left:'+cx+'px;top:'+cy+'px;width:'+length+'px;transform:rotate('+angle+'deg);"></div>';
    document.body.innerHTML += htmlLine;
}

How can I cut-off edges from that div, so that left and right side stays parallel to the screen?

Take a look at the picture to understand what I'm going for

Answer 1

Use transform: skew(ax, ay) with ax == 0 or transform: skewY(ay) :

 div { width: 200px; height: 20px; background: green; transform: skew(0, 20deg); transform-origin: top left; } 

 <div></div> 

In your case, if you intend to keep your connect function the same, just replace rotate in your transform call with skewY :

 function connect(x1,y1,x2,y2,color,thickness) { var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));// distance var cx = ((x1 + x2) / 2) - (length / 2);// center var cy = ((y1 + y2) / 2) - (thickness / 2);// center var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);// angle var htmlLine = '<div style="height:'+thickness+'px; background-color:'+color+';line-height:1px;position:absolute;left:'+cx+'px;top:'+cy+'px;width:'+length+'px;transform:skewY('+angle+'deg);"></div>'; document.body.innerHTML += htmlLine; } connect(0, 0, 300, 40, 'green', 10);