CSS 实现平行四边形、菱形、切角效果、梯形

平行四边形

我们可以通过 skew() 的变形属性将矩形进行斜向拉伸：

<div class="bg"></div>
<style>
.bg{
      width: 500px;
      height: 500px;
      margin:0 auto;
      background: #655;
      transform: skewX(-45deg);
    }
</style>

实现效果：

需要注意的是：
如果要把这个效果应用到行内元素，需要把 display 属性设置为: inline-block 或 block.

菱形

我们再补充一个菱形的制作方案：

<div class="ling"></div>
<style>
.ling{
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
      transition: 1s clip-path;
      width: 100px;
      height: 100px;
      margin:0 auto;
      background: #655;
    }
    .ling:hover{
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
</style>

效果：

切角

网页设计中，很多切角的设计，通常我们会用图片实现，其实还通过线性渐变实现：
实现方法就是在切角处放一个透明的色标，利用渐变可以接受一个角度（比如45deg）作为方向，而且色标的位置信息也可以是绝对的长度值，这一点丝毫不受容器尺寸的影响。

<div class="jiao"></div>
<style>
.jiao{
      width: 100px;
      height: 100px;
      margin:0 auto;
      background: #58a; /*非必须，只是作为一个回退机制*/
      background:  linear-gradient(-45deg, transparent 15px, #58a 0);
    }
</style>

效果图：

梯形

<div class="tixing"></div>
<style>
.jiao{
      width: 100px;
      height: 100px;
      margin:0 auto;
      background: #58a; /*非必须，只是作为一个回退机制*/
      transform: perspective(.5em) rotateX(5deg);
    }
</style>

效果：