2.平行四边形

我们可以通过 skew() 的变形属性来对这个矩形进行斜向拉伸

  .box{
      width: 200px;
      height: 100px;
      background-color: blue;
      transform: skewX(-45deg);
  }

                                    ![image.png](https://cdn.nlark.com/yuque/0/2021/png/22615031/1632271378234-1c4197d7-88c1-4b93-9f86-178504e9dc58.png#clientId=u81b03a70-a879-4&from=paste&height=83&id=ud08e5f23&margin=%5Bobject%20Object%5D&name=image.png&originHeight=166&originWidth=348&originalType=binary&ratio=1&size=2392&status=done&style=none&taskId=ua7f4bba4-45e1-4516-b4b4-8f138e553bb&width=174)

有没有办法只让容器的形状倾斜，而保持其内容不变呢？
我们可以对内容再应用一次反向的 skew() 变形，从而抵消容器的变形 效果，

 .button{
   display: block;
   width: 100px;
   height: 50px;
   background-color: red;
  transform: skewX(-45deg);
 }
 .button>div{
   transform: skewX(45deg);
 }

                                              ![image.png](https://cdn.nlark.com/yuque/0/2021/png/22615031/1632271654687-95cbab0e-dff4-4330-94fe-4d06d04e76f8.png#clientId=u81b03a70-a879-4&from=paste&height=93&id=u21b4af5e&margin=%5Bobject%20Object%5D&name=image.png&originHeight=93&originWidth=200&originalType=binary&ratio=1&size=1615&status=done&style=none&taskId=u1f0bf5fe-cb8a-4a80-96ce-2c4b5e9716e&width=201)

嵌套元素方案

.button{
  position: relative;
}
.button::before{
   content: '';
   position: absolute; 
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   transform: skewX(-45deg);
   background-color: black;
   z-index: -1;
}
  <a href="#yolo" class="button">
      Click me
  </a>