当前位置: 首页 > 知识库问答 >
问题:

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

汪弘毅
2023-12-30

BgSub_clipboard.png

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

共有2个答案

融渊
2023-12-30

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

image.png

<!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-30

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

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