“This is the first day of my participation in the First Challenge 2022. For details: First Challenge 2022”

The Nuggets cup is used a lot, so can we draw it with CSS? Since this year is the Year of the Tiger, we call it the Year of the Tiger.

Year of the Tiger nuggets cup

We can do this with a div element, high energy ahead, the year of the Tiger nuggets cup is coming. The year of the Tiger nuggets cup is composed of: body, mouth, bottom and handle.

<div class="glass">🐅</div>
Copy the code

bowl

Because the Nuggets have a similar cup aspect ratio1：1As well as the visual influence of the cup body and the bottom of the cup, we set the width to height ratio of the cup body as8 1-0.. The bottom of the cup body is slightly curved to better fit with the bottom of the cup, as follows:

.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);
}
Copy the code

The last three lines of code are all about changing the size and position of the tiger.

Rim and bottom

The rim and bottom of the cup are false elements of divbeforeImplemented, the pseudo-element itself forms the rim of the cup, using a shadow effect to achieve the bottom of the cup. The realization of the bottom of the cup is the superposition of several layers of shadows. We can gradually reduce the shadows and overlap them downward, as follows:

.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;
}
Copy the code

The cup

The cup handle is a pseudo-element of the divafterWe can deform the irregular pattern, and then cut the part suitable for the cup handle, as follows:

.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;
}
Copy the code

combination

Put the above three parts together to form the year of the Tiger nuggets cup, because the cover image is effective, not shown here.

conclusion

When we want to wait for a pattern, it is not necessary to draw the current pattern completely, but also can draw a pattern containing the pattern you need, and finally intercept.