绘制这种不规则的背景图形，目前我的思路是使用伪元素
伪元素的优点在于不用添加新的元素
实现平行效果使用了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%);
}
}
然后第一个是直角梯形直接平移一下位置，利用父级的背景色来进行遮盖
标签：linear,gradient,梯形,background,平行四边形,border,css,deg From： https://www.cnblogs.com/hhcome/p/17777705.html