求教，这种线性渐变效果怎么实现?

Question

Answer 1

这个其实分两部分，一个是形状，一个是渐变

形状其实是两个圆形加上一个矩形，这个用CSS渐变或者用背景图片都可以

然后再绘制一个从透明到不透明的矩形，然后以上面的图案作为遮罩背景

代码实现如下

.dot{
  width: 100%;
  height: 40px;
  -webkit-mask: radial-gradient(circle at 10px 50%, red 9.5px, transparent 10px) 0 0/60px repeat-x,
  radial-gradient(circle at 30px 50%, red 9.5px, transparent 10px) 0 0/60px repeat-x,
  linear-gradient(to right, red 20px, transparent 0 ) 10px 50%/60px 20px repeat-x;
  background: linear-gradient(to right, transparent, #9c27b0);
}

在线demo：https://codepen.io/xboxyan/pe...