css平行四边形梯形组合

在CSS中，我们可以通过变换（transform）和旋转（rotate）属性来实现平行四边形、梯形和组合效果。下面介绍一下如何使用CSS代码来实现这些效果。

// 实现平行四边形.parallelogram {
      width: 200px;
      height: 100px;
      background: #ccc;
      transform: skew(20deg);
}
// 实现梯形.trapezoid {
      width: 200px;
      height: 0;
      border-bottom: 100px solid #ccc;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
}
// 实现组合效果.shape {
      position: relative;
}
.shape:before {
      content: ';
      position: absolute;
      top: 0;
      left: -40px;
      width: 0;
      height: 0;
      border-top: 30px solid transparent;
      border-right: 40px solid #ccc;
      border-bottom: 30px solid transparent;
}
.shape:after {
      content: ';
      position: absolute;
      top: 0;
      right: -40px;
      width: 0;
      height: 0;
      border-top: 30px solid transparent;
      border-left: 40px solid #ccc;
      border-bottom: 30px solid transparent;
}
    

以上代码实现了三种效果。首先是平行四边形，我们通过将元素的宽高分别设置为200px和100px，然后使用transform: skew(20deg)来实现斜切，即可得到一个平行四边形。其次是梯形，我们先将元素的高度设置为0，然后通过设置下边框100px和左右边框各50px，并将左右边框设置为透明，来实现梯形。最后是组合效果，我们在元素外部包裹一个父级元素，并在该父级元素上设置position: relative。然后在该元素的before和after伪元素中设置三角形的样式，并分别设置它们的位置为元素的左右两侧。这样，一个组合效果就完成了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！