css 背景样式梯形/平行四边形-526互联

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

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

实现平行效果使用了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%);
      }
    }