Fatal编程技术网
  • javascript/
  • Javascript 左右边缘倾斜/切回平行的旋转div

Javascript 左右边缘倾斜/切回平行的旋转div

javascript html css

Javascript 左右边缘倾斜/切回平行的旋转div,javascript,html,css,Javascript,Html,Css,我使用此函数旋转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);// cen

我使用此函数旋转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;
}

功能连接（x1、y1、x2、y2、颜色、厚度）{
变量长度=数学sqrt（（x2-x1）*（x2-x1））+（（y2-y1）*（y2-y1））；//距离
变量cx=（（x1+x2）/2）-（长度/2）；//中心
变量cy=（（y1+y2）/2）-（厚度/2）；//中心
变量角度=数学atan2（（y1-y2），（x1-x2））*（180/数学PI）；//角度
var htmline=''；
document.body.innerHTML+=htmlLine；
}
如何从该div中剪切边缘，使左侧和右侧保持与屏幕平行

看一看这张照片，了解我想要的是什么

使用
变换：歪斜（ax，ay）
和
ax==0
或
transform:skewY（ay）
:

div{
宽度：200px；
高度：20px；
背景：绿色；
变换：倾斜（0,20度）；
变换原点：左上角；
}
变换：歪斜（20度）也可以使用。太好了，就是这样！我试着用歪斜的东西，但做不到。非常感谢。我知道有一种更简单的方法，而不是使用伪元素来隐藏这些部分。