请问这种水滴形状用css怎么画呢？

发布于
2023-12-30 福建

请问这种水滴形状用css怎么画呢？

阅读 4.6k

3 个回答

拉格朗日的假日

发布于
2023-12-30 福建

✓ 已被采纳

如果要 纯CSS 可以改 border-radius 实现一个类似的，但一般绘图还是建议直接用 canvas 或者 svg

<!DOCTYPE html>
<html>
  <head>
    <style>
      .water-drop {
        width: 100px;
        height: 260px;
        background-color: #3498db;
        border-radius: 50% 50% 50% 50% / 20% 20% 80% 80%;
      }
    </style>
  </head>
  <body>
    <div class="water-drop"></div>
  </body>
</html>

发布于
2023-12-31 福建

https://css.bqrdh.com/border/radius/editor

最后用这个工具画了一个，解决

发布于
2023-12-30 广东

建议使用svg和canvas。如果只学过短时间内搞不定的，那么可以试试以下两种：

让UI给你出图，没错，这是最快的，别总想着自己画，很多东西人家UI随便点点鼠标就可以解决，你坑次坑次半天都出不来。
我刚去iconfont看了一下，里面就有很多雨滴的图标，你可以去看看有没有合适的。iconfont 直接搜这个就好了。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题