CSS 圆锥渐变+MASK遮罩实现WIFI图标

.wifi-icon {
  width: 100px;
  height: 100px;
  background: linear-gradient(120deg, #5e72e4, #8929b1);
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
 
.wifi-icon::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, #5e72e4, #8929b1);
  border-radius: 50% 50% 0 0;
}
 
.wifi-icon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, #5e72e4, #8929b1);
  border-radius: 0 100% 0 0;
}
 
.wifi-icon::mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

这段代码使用伪元素和mask属性创建了一个圆锥形状的WIFI图标。它使用了CSS线性渐变来实现颜色的过渡效果，并且使用了border-radius来实现圆角的效果。通过使用::before和::after伪元素，我们创建了上半部分的圆锥形状，并使用::mask伪元素来创建一个从下到上透明度逐渐减小的遮罩，以实现圆锥的底部。这是一个简单而有效的实现方式，适合初学者学习和理解。