如何用CSS实现高水滴形状？border-radius实现可行性咨询

嘿，我来帮你搞定这两个CSS形状实现的问题，都是前端里实用的小技巧，咱们一个个说：

制作高瘦的水滴形状，最直观的方法是用border-radius灵活搭配宽高比，也可以用clip-path实现更精准的控制。

方法一：用border-radius快速实现 #

利用border-radius的水平/垂直拆分写法，我们可以给元素的顶部设置超大圆角，底部设置小圆角，再配合细长的宽高比，就能模拟高水滴：

.tall-drop {
  width: 24px;
  height: 88px;
  background: #00aaff;
  /* 水平方向四个角都是50%，垂直方向顶部两个角90%，底部两个角10% */
  border-radius: 50% / 90% 90% 10% 10%;
}

调整border-radius的百分比数值和宽高比，就能得到不同“瘦高”程度的水滴。

方法二：用clip-path自定义形状 #

如果需要更精准的形状控制，可以用clip-path绘制多边形路径：

.tall-drop-clip {
  width: 24px;
  height: 88px;
  background: #00aaff;
  clip-path: ellipse(35% 92% at center);
}

或者用更细致的多边形路径：

.tall-drop-clip {
  width: 24px;
  height: 88px;
  background: #00aaff;
  clip-path: polygon(
    50% 0%,
    90% 25%,
    90% 75%,
    50% 100%,
    10% 75%,
    10% 25%
  );
}

针对你说的火箭上方的蓝色长水滴，两种实现思路都可行：

方案一：用border-radius完全可以实现 #

这种细长的水滴本质就是border-radius的灵活运用，只需要调整水平和垂直方向的圆角比例，让顶部更圆润、底部收窄：

.rocket-drop {
  width: 16px;
  height: 64px;
  background: #00aaff;
  /* 水平方向圆角拉满，垂直方向顶部85%，底部15% */
  border-radius: 100% / 85% 85% 15% 15%;
}

把这个元素放在火箭图标的上方，就能得到你想要的效果。

方案二：不用border-radius也能实现 #

如果不想用border-radius，可以用以下两种方式：

1. clip-path路径裁剪
   用椭圆或多边形路径直接画出长水滴：

   .rocket-drop-noradius {
     width: 16px;
     height: 64px;
     background: #00aaff;
     clip-path: ellipse(28% 90% at center);
   }
   

2. SVG绘制
   直接用SVG绘制精准的水滴形状，作为元素背景或内嵌到HTML中：

   <svg width="16" height="64" viewBox="0 0 16 64">
     <path d="M8,0 C12,0 16,10 16,22 L16,42 C16,54 12,64 8,64 C4,64 0,54 0,42 L0,22 C0,10 4,0 8,0 Z" fill="#00aaff"/>
   </svg>
   

   这种方法的好处是形状完全可控，缩放也不会失真。

内容的提问来源于stack exchange，提问作者Justin808