與左，右邊緣旋轉格傾斜/切回平行

Question

我用這個功能來旋轉格：

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; 
} 

我怎樣才能切斷邊緣從該div，使左，右側保持平行到屏幕？

看看圖片明白我要爲

Answer 1

使用transform: skew(ax, ay)與ax == 0 或transform: skewY(ay) ：

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

<div></div>

在你的情況，如果你想把你的connect功能相同，只是skewY取代rotate在變換電話：

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);