可以仅使用CSS进行此设计吗？

Question

https://i.imgur.com/D69glPV.png-我正在尝试使用CSS / HTML创建此设计。我最初的想法是创建一个白色的“ wave”容器，将带有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>