回転divの傾斜/

Question

を平行にカットバック私は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; 
} 

どのようにカットオフすることができますエッジをそのDIVから、左右が平行に留まるように画面に？

は私が

ax == 0 または transform: skewY(ay) と

Answer 1

使用transform: skew(ax, 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);