「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」

掘金的杯子经常使用，那么我们可不可以用CSS把它画出来呢？即然今年是虎年，我们就称呼它为虎年掘金杯把。

虎年掘金杯

我们用一个div元素就可以实现它了，前方高能，虎年掘金杯即将出现。虎年掘金杯是由：杯身、杯口、杯底、杯把组成。

<div class="glass">🐅</div>

杯身

因为掘金的杯子宽高比接近1：1，以及我们画的杯身视觉上还有杯口、杯底的影响，所以我们设置的杯身宽高比为1：0.8。杯身底部再稍微给点弧度，以便于和杯底更好的契合，实现如下：

.glass {
    --w: 10rem;
    width: var(--w);
    height: calc(var(--w) * 0.8);
    background-color: #ddded9;
    border-radius: 0 0 10% 10%;
    position: relative;

    text-align: center;
    line-height: calc(var(--w) * 0.8);
    font-size: calc(var(--w) * 0.3);
}

其中，最后的三行代码，完全是为了改变老虎图案的大小与位置。

杯口与杯底

杯口与杯底是由div的伪元素before实现的，伪元素本身形成了杯口，使用阴影效果实现了杯底。杯底的实现是几层阴影叠加而成的，我们可以把阴影逐步缩小，逐步往下重叠，实现如下：

.glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--w) * 0.2);
    border-radius: 50%;
    transform: translateY(-50%);
    background-color: #0a4f86;
    box-shadow: 0 0 calc(var(--w) * 0.01) calc(var(--w) * 0.02) #e7e9e5
                    inset,
            0 calc(var(--w) * 0.75) calc(var(--w) * 0.025) calc(var(--w) * -0.025)
                    #ddded9,
            0 calc(var(--w) * 0.775) 0 calc(var(--w) * -0.025) #ced0c8,
            0 calc(var(--w) * 0.825) calc(var(--w) * 0.025) calc(var(--w) * -0.05)
                    #a0a29a;
}

杯把

杯把是由div的伪元素after实现的，我们可以变形出不规则的图案，然后截取适合当杯把的部分，实现如下：

.glass::after {
    content: '';
    position: absolute;
    width: var(--w);
    height: calc(var(--w) * 0.6);
    top: calc(var(--w) * 0.08);
    right: calc(var(--w) * -0.4);
    box-sizing: border-box;
    border-width: calc(var(--w) * 0.07) calc(var(--w) * 0.05)
            calc(var(--w) * 0.1) 0;
    border-color: #ddded9;
    border-style: solid;
    border-radius: 50% 35% 65% 0;
    z-index: -1;
}

组合

把上述三部分组合在一起就形成了虎年掘金杯了，因为封面图有效果，此处就不展示了。

总结

在我们想等到一个图案的时候，不一定完全画出当前图案，也可以画出包含你所需要的图案的图案，最后进行截取。