如何使用CSS绘制形状类似的水滴？

Question

我想使用CSS绘制这些形状，但是有点麻烦

我正在尝试上述方法：

CSS：

.menu-animation{
    border-radius: 50%;
    display: inline-block;
    height: 40px;
    width: 40px;
    background-color: #000000;
    position: relative;
    left: 0px;
}
.menu-animation2{
    border-radius: 50%;
    display: inline-block;
    height: 29px;
    width: 23px;
    background-color: #000000;
    position: absolute;
    left: 9px;
    top: 26px;
}

Answer 1

如果您真的想要仅CSS的解决方案，则可以使用border-radius: 50%;方法创建黑眼圈，将它们与黑眼圈矩形组合在一起，并用白眼圈模拟两侧的圆形切口。它是这样工作的：

可以使用伪元素::before和::after创建单个圆形元素。使用某些positioning，可以正确调整圆圈的位置。

这是一个有效的示例：

.drop {
  background: black;
  margin: 40px;
  height: 20px;
  width: 14px;
  position: relative;
  z-index: 10;
}

.drop::before,
.drop::after {
  content: '';
  position: absolute;
  background: black;
  border-radius: 50%;
}

.drop::before {
  width: 30px;
  height: 30px;
  top: -25px;
  left: -7px;
}

.drop::after {
  width: 20px;
  height: 20px;
  top: 10px;
  left: -3px;
}

.gaps::before,
.gaps::after {
  content: '';
  position: absolute;
  background: white;
  border-radius: 50%;
  z-index: 10;
}

.gaps::before {
  width: 22px;
  height: 22px;
  top: -3px;
  left: -21px;
}

.gaps::after {
  width: 22px;
  height: 22px;
  top: -2px;
  left: 13px;
}

<div class="drop">
  <div class="gaps"></div>
</div>

尽管这几乎是完美的，但我建议您使用SVG来解决此问题，因为您可以创建平滑的轮廓，而不必担心位置，尺寸和响应式设计。

Answer 2

使用CSS很难做到这一点，但是还有其他解决方案。您可以尝试使用JavaScript和HTML5 Canvas元素绘制它们。或更简单的解决方案是在Adobe Illustrator之类的程序中创建插图，然后将图像导出为SVG文件。从文件中获取SVG代码（Adobe Illustrator为您完成此操作），它基本上包含矢量的路径。然后，您可以将所有信息添加到SVG HTML标记中并查看该元素。然后，CSS使您可以与SVG元素进行交互。

Answer 3

如果您可以使用SVG，甚至可以制作成动画，就可以这样做：

var circle2 = document.getElementById('circle2');

setInterval(function() {
  circle2.style.transition="unset";
  circle2.style.transform = "translate(0, 0)";
  setTimeout(function() {
    circle2.style.transition="transform 1400ms ease-in";
    circle2.style.transform = "translate(0, 230px)";
  }, 0);   
}, 1400);
       

<div style="overflow: hidden">
<svg viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="goo-filter">
      <feGaussianBlur stdDeviation="8" />  
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"  />
    </filter>
  </defs>  
  <g fill="black" filter="url(#goo-filter)">
    <circle id="circle1" cx="100" cy="40" r="20" />
    <circle id="circle2" cx="100" cy="40" r="12" />
   </g>
</svg>
<div>