css中平行四边形 |css给div画边框颜色

.parallelogram {
width: 150px;
height: 80px;
background-color: #ccc;
transform: skew(-20deg);
}

上述代码使用transform属性制作了一个倾斜的平行四边形。其中，skew函数可以设置水平和垂直方向的倾斜角度，此处的-20deg表示向左倾斜20度。

.parallelogram {
position: relative;
width: 150px;
height: 80px;
background-color: #ccc;
}
.parallelogram::before {
position: absolute;
top: 0;
left: -30px;
content: '';
width: 0;
height: 0;
border-top: 80px solid transparent;
border-right: 30px solid #ccc;
border-bottom: 80px solid transparent;
}

上述代码使用伪元素制作了一个倾斜的平行四边形。其中，伪元素使用position: absolute属性定位到了原元素的左侧，并使用border属性设置三个边框为透明色，一个边框为solid颜色，形成倾斜的形状。

通过以上两种方法，可以轻松地制作出漂亮的平行四边形效果，为网页设计增添一份美感。