css div直角梯形 |css固定头部左右滚动

首先定义一个div，大家可以使用以下CSS样式：

div {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid red;
}

以上的CSS样式定义了一个宽度为0，高度为0的div，并使用border属性实现了梯形效果。border-top和border-bottom分别定义了上下两个三角形的高度，使用transparent表示透明。而border-right定义了梯形的宽度和颜色。

如果大家想要实现一个左边缘是直线的梯形，可以使用以下CSS样式：

div {
position: relative;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid red;
}
div:before {
content: "";
position: absolute;
left: -100px;
top: 0;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid red;
}

以上CSS样式中，大家使用:before伪元素实现了左边缘为直线的梯形。大家首先在原来的div上定义了position:relative，表示该div为相对定位，然后使用:before定义一个绝对定位的伪元素，并设置left属性为-100px，即以当前div的左侧为准，坐标向左偏移100px，达到左侧为直线的效果。

以上就是使用CSS实现直角梯形的方法，有了这个技巧，大家在网页设计中就能更加灵活地处理不同形状的需求了。