[分享]css中平行四边形怎么画

在CSS中，我们可以使用transform、skewX以及:before和:after伪元素来实现平行四边形的效果。下面我们就来看看具体实现方法。

//HTML代码
<div class="parallelogram"></div>

//CSS代码
.parallelogram {
  width: 200px;
  height: 100px;
  background-color: #009999;
  transform: skewX(-20deg);
  position: relative;
}

.parallelogram:before {
  content: ';
  position: absolute;
  top: 0;
  left: -20px;
  width: 0;
  height: 0;
  border-top: 100px solid #009999;
  border-right: 20px solid transparent;
}

.parallelogram:after {
  content: ';
  position: absolute;
  bottom: 0;
  right: -20px;
  width: 0;
  height: 0;
  border-bottom: 100px solid #009999;
  border-left: 20px solid transparent;
} 

在上述代码中，.parallelogram为平行四边形所在div的类名。首先我们将该元素的宽高设置好，设置好背景颜色并借助transform进行倾斜，形成平行四边形。

接着我们利用:before和:after伪元素，分别创建一个三角形。设置好位置和大小，并利用border-top、border-bottom、border-left和border-right进行边框样式的设置。注意，其中有一个边框需要设置成透明，否则将会遮挡住平行四边形部分。

最终的效果如下图所示：

通过这样的方法，我们可以方便地实现平行四边形的效果。当然，在实际应用中，还有许多其他的方法也可以达到类似的效果，这里仅作为一种实现方式参考。