这个设计可以用CSS制作吗？ [关闭]

Question

https://i.imgur.com/D69glPV.png - 我正在尝试用CSS / HTML创建这个设计。我最初的想法是创建白色“波”容器，用SVG形状包装图标，但我想知道你是否真的能用CSS制作它？你们怎么接近这个？ :)

Answer 1

你这样做的方法是使用SVG过滤器：SVG goo on Codepen

您也可以阅读这个The Gooey Effect

最重要的是定义一个goo过滤器。接下来，您绘制几个圆（border-radius:50%;）并应用svg过滤器。

SVG元素的大小无关紧要，您可以将其隐藏起来。

body{background:skyBlue;}
svg{position:absolute;left:-10em;}
.wrap {
  
  display: block;
  margin:0 auto;
  width: 300px;
  height: 260px;
  position: relative;
  filter:url(#goo);
}
.wrap div {
  
  position: absolute;
  left: 0px;
  top: 90px;
  height: 80px;
  width: 80px;
  border-radius:50%;
  background-color: white;
  color:red;
  text-align:center;
  line-height:80px;

}
.wrap div:nth-child(2){
  left: 90px;
}
.wrap div:nth-child(3){
  left: 180px;
}

<svg  width="1" height="1">
<defs>
<filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" 
                     values="1 0 0  0   0  
                             0 1 0  0   0  
                             0 0 1  0   0  
                             0 0 0 40  -10" result="goo"/>
      <feBlend in="SourceGraphic" in2="goo" />
    </filter> 
  </defs>
</svg>


<div class ="wrap">
<div>A</div>
<div>B</div> 
<div>C</div> 
</div>