css写出水滴效果

主要还是靠box-shadow 和 background 还有伪元素。
直接看效果，可以审查元素看页面效果，下面也同样贴了代码。

下面直接贴的代码

<div class="demo-container">
    <style>
        .demo-container {
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #54abfb;
        }
        .drop {
            display: inline-block;
            position: relative;
            height: 200px;
            width: 200px;
            background-color: #54abfb;
        }
        .drop::before {
            content: "";
            position: absolute;
            height: 100%;
            width: 100%;
            background: #318CFE;
            border-radius: 51% 49% 48% 52% / 62% 44% 56% 38%;
            box-shadow: -20px 30px 16px #1B6CFB, -40px 60px 32px #1b6cfb, inset -6px 6px 10px #186CFB, inset 2px 6px 10px #1a74e5, inset 20px -20px 22px white, inset 40px -40px 44px #a8ceff;
        }
        .drop::after {
            content: "";
            position: absolute;
            height: 40px;
            width: 40px;
            background: #E6FDFB;
            border-radius: 44% 56% 46% 54% / 36% 50% 50% 64%;
            left: 130px;
            top: 40px;
            box-shadow: 16px 40px 0 -10px white;
            opacity: 0.8;
        }
    </style>
    <div class="drop"></div>
</div>

我们再换一种感觉，看着简单一点的

这个可能看着更简易一点

<div class="demo-container_1">
    <style>
        .demo-container_1 {
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #CADE01;
        }
        .drop_1 {
            display: inline-block;
            position: relative;
            height: 190px;
            width: 180px;
            background-color: #EFEA63;
            border-radius: 400px / 400px;
            box-shadow: inset 6px 42px 20px 0 #8AD000, inset 18px 89px 12px 0 #DCE72C, 12px 18px 17px 0px #83c100;
        }
        .drop_1::before {
            position: absolute;
            content: '';
            background-color: #F4F1F4;
            width: 15px;
            height: 40px;
            left: 50px;
            top: 15px;
            transform: rotate(60deg);
            border-radius: 37% 54% 46% 46%;
        }
        .drop_1::after {
            position: absolute;
            content: '';
            background-color: #F4F1F4;
            width: 10px;
            height: 10px;
            left: 25px;
            top: 50px;
            transform: rotate(50deg);
            border-radius: 50%;
        }
    </style>
    <div class="drop_1"></div>
</div>