再看看这个水滴

马黑黑

CSS代码：

<style>
.drop1 {
    width: 50px;
    height: 50px;
    border-radius: 0 50% 50% 50%;
    border: 1px solid magenta;
    transform: rotate(-135deg);
    margin-top: 20px;
}
.drop2 {
    width: 50px;
    height: 50px;
    border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
    transform: rotate(-45deg);
    margin-top: 20px;
}

.drop {
    background: radial-gradient(circle at 35px 40px, rgb(184,226,252), rgb(255,255,255));
}
</style>

HTML代码：

<div class="drop1"></div>
<div class="drop drop2"></div>

效果看看行不行：

马黑黑

第一个没有着色，并且有边框，方向也不同，主要是为了让大家看看轮廓。水滴或泪滴应像下面的那样。

CSS部分可以整合，不用那么多的类选择器

红影

下面这个像泪滴呢

红影

上面的代码简单，下面的相对复杂，但形成的线条更柔和。

马黑黑

红影 发表于 2022-3-26 14:51
下面这个像泪滴呢

这是幸福的泪滴

马黑黑

红影 发表于 2022-3-26 14:55
上面的代码简单，下面的相对复杂，但形成的线条更柔和。

上面那个是提供一个画形状的思路，略加修饰，效果和下面的一样

红影

马黑黑 发表于 2022-3-26 16:26
这是幸福的泪滴

这样清纯，应该是仙子的泪滴

红影

马黑黑 发表于 2022-3-26 16:36
上面那个是提供一个画形状的思路，略加修饰，效果和下面的一样

好像上面的只是border-radius: 0 50% 50% 50%;
而下面的border-radius: 80% 0 55% 50% / 55% 0 80% 50%; 带斜杠的这个还没弄明白

马黑黑

红影 发表于 2022-3-26 16:45
好像上面的只是border-radius: 0 50% 50% 50%;
而下面的border-radius: 80% 0 55% 50% / 55% 0 80% 50%; ...

这个嘛，CSS里的斜杠，在border-radius这是，斜杠前的是规范水平方向四个圆角的弧度，斜杠后是规范垂直方向四个圆角的弧度，试试大概能知道

马黑黑

红影 发表于 2022-3-26 16:43
这样清纯，应该是仙子的泪滴

仙子的就会更幸福了

加林森

这个好玩，找一张鳄鱼图片让它哭起来。

红影

马黑黑 发表于 2022-3-26 17:59
这个嘛，CSS里的斜杠，在border-radius这是，斜杠前的是规范水平方向四个圆角的弧度，斜杠后是规范垂直方 ...

哦哦，还以为跟颜色一样一层层加的呢，原来是不同方向的。

红影

马黑黑 发表于 2022-3-26 17:59
仙子的就会更幸福了

这个配色好美的

绿叶清舟

试了下没动起来啊

马黑黑

绿叶清舟 发表于 2022-3-26 21:02
试了下没动起来啊

这个要动，你得加个 @keyframes 动画，再在水滴的盒子里通过 animation 调用动画。这个你都会的，想想你的船。

马黑黑

红影 发表于 2022-3-26 21:01
这个配色好美的

泛一点点滥就这效果

马黑黑

红影 发表于 2022-3-26 21:01
哦哦，还以为跟颜色一样一层层加的呢，原来是不同方向的。

不是啊，各有各的规矩的，你应该还有 font 语句的印象：

font: bold 14px / 15px '宋体';

这是语法糖啊，14px 是字体大小， 15px 是行高（其实就是行与行之间的距离）

绿叶清舟

马黑黑 发表于 2022-3-26 21:16
这个要动，你得加个 @keyframes 动画，再在水滴的盒子里通过 animation 调用动画。这个你都会的，想想你 ...

二个都加了啊，可是没动起来想上下动的，用TOP？

红影

马黑黑 发表于 2022-3-26 21:16
泛一点点滥就这效果

嗯嗯，渐变。

马黑黑

红影 发表于 2022-3-26 21:21
嗯嗯，渐变。

还好吧