css平行四边形左边为直角

CSS平行四边形是前端开发中常用的样式，这种样式可以帮助我们实现各类各样的视觉效果。而在平行四边形中，如果我们想让左边是直角形状，该如何实现呢？让我们借助CSS探索一下。

  <div class="parallelogram">
    <p>这是一个平行四边形，左边是直角</p>
  </div>

首先，我们先在HTML中创建一个div元素，用作容器。在这个容器中，我们可以放置我们想要的任何元素，比如文字、图片等。

.parallelogram {
  width: 200px; /*宽度*/
  height: 100px; /*高度*/
  background-color: #369; /*背景色*/
  transform: skew(-20deg); /*平行四边形变换*/
  transform-origin: top left; /*变换原点*/
  position:relative; /*定位*/
  left:-40px; /*向左偏移*/
}
.parallelogram:before{
  content:"";
  position:absolute;
  top:0;
  left:-20px;
  width:0;
  height:0;
  border-width: 0 20px 100px 0px;
  border-style: solid;
  border-color: transparent #369 transparent transparent;
}

接下来，我们借助CSS实现平行四边形效果。我们可以使用transform属性来进行倾斜变换，然后使用transform-origin属性来指定变换的原点，使其变换后的效果为左边是直角。

然后，我们使用一个伪元素before来制作出左侧的三角形。使用border-width、border-style和border-color属性来设置三角形大小和样式。而使用position:absolute和top、left属性将其定位到容器的左侧。

最后，我们还可以使用position:relative和left属性来微调平行四边形的位置，使其更加符合我们的需求。