旋转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的边缘，使左右两侧与屏幕平行？

看看图片，了解我的目标

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功能相同，只需将变换通话中的rotate替换为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);