css平行四边形图解

CSS是一种用于网页样式设计的语言，可实现各种样式的设置，并可让页面看起来更漂亮和专业。接下来为您介绍如何用CSS绘制平行四边形

/*定义平行四边形样式*/.parallelogram{
      width: 100px;
      height: 50px;
      position: relative;
      transform: skewX(20deg);
      background-color: #FFC107;
}
.parallelogram:before{
      content: ';
      position: absolute;
      top: 0;
      left: -20px;
      height: 50px;
      width: 20px;
      transform: skewX(-20deg);
      background-color: #FFC107;
}
.parallelogram:after{
      content: ';
      position: absolute;
      bottom: 0;
      left: -20px;
      height: 50px;
      width: 20px;
      transform: skewX(-20deg);
      background-color: #FFC107;
}
    

上述代码中，我们首先定义了一个样式为parallelogram的类，它的宽度为100像素，高度为50像素，位置为相对定位，呈正20度的横向扭曲，并且背景色为黄色。

接下来，我们又定义了:before和:after伪元素，通过这两个元素分别设置样式实现四边形，偏移量为20px，高度与parallelogram相同，颜色也与parallelogram相同，并呈20度的反向横向扭曲。

最终，我们将parallelogram类调用到HTML文件中，在body或div等元素中引用该类，我们就可以得到一个漂亮的平行四边形啦！

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