css 背景样式 梯形/平行四边形

绘制这种不规则的背景图形，目前我的思路是使用伪元素

伪元素的优点在于不用添加新的元素

实现平行效果使用了css 

transform: skew();

具体代码如下

 {
      position: relative;
      padding-left: 12px;
      color: #2187FF;
      background: #14395c;
      border-image-slice: 1;
      box-sizing: border-box;
      background: linear-gradient(270.85deg, #16356c 12.65%, #112a52 98.54%);
      &:before{
        left: 15px;
        border-image-source: linear-gradient(323.52deg, #007eff 17.27%, #017fff00 54.71%);
        background: linear-gradient(270.85deg, #16356c 12.65%, #112a52 98.54%);
      }
    }

然后第一个是直角梯形直接平移一下位置，利用父级的背景色来进行遮盖