如何使用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 这将非常困难，但还有其他解决方案。您可以尝试使用 JavaScript 和 HTML5 Canvas 元素绘制它们。或者更简单的解决方案是在 Adobe Illustrator 等程序中创建插图，将图像导出为 SVG 文件。从文件中获取 SVG 代码（Adobe Illustrator 为您完成），它基本上包含矢量的路径。然后，您可以在 SVG HTML 标记中添加所有信息并查看元素。 CSS 然后允许您与 SVG 元素交互。

Answer 2

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

可以使用伪元素创建单个圆元素::before and ::after. With some 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 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>

如何使用CSS画出水滴状的形状？

How to draw a drop like shape using CSS?

html

css

css-shapes