Use CSS to tease a nervous cat

Preface

The previous surrounding Nervous Cat became popular in the circle of friends. Among them, Nervous Cat’s humble expression and various postures with butt exposed also brought a lot of fun to users. Now we use CSS to make a little cat. Download a Neural Cat picture we want to imitate from the Internet, as follows:


The effect diagram achieved by CSS is as follows:


Although it cannot be said to be exactly the same, at least I think the curvature of the buttocks already has that essence (you can also optimize it)

Code

head

The head is a circle that is not completely round, plus two triangular ears, and the face is composed.

<div class="header">
    <div class="ear1"></div>
    <div class="ear2"></div>
    <!-- face -->
</div>

The head is different in width and height, plus 48% rounded corners, to create a non-circular head

.header {
    position: relative;
    width: 75px;
    height: 70px;
    border-radius: 48%;
    border: 1px solid #000;
    background-color: #fff;
    z-index: 10;
}

ear

The ear is a triangle with only a border. Generally, we realize the triangle by using a 0-width and height element, and only set a colored border, and the adjacent two borders are set to transparent, so that the triangle realized is a completely filled color triangle. If you want to achieve only a border, you can superimpose a small white triangle on the triangle, so that it looks like a hollow triangle with only a border.

.ear1 {
    position: absolute;
    left: 17px;
    top: -10px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 15px solid #000;
}

.ear1::after {
    content: '';
    position: absolute;
    left: -4px;
    top: 2px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 14px solid #fff;
}

Face

The elements of the face are the eyes, eyebrows, and mouth. First realize the elements and then write the style.

<div class="face">
    <div class="eyebrow"></div>
    <div class="eye"></div>
    <div class="eyebrow1"></div>
    <div class="eye eye1"></div>
    <div class="mouth">
        <div class="mouth1"></div>
        <div class="mouth2"></div>
        <div class="mouth3"></div>
    </div>
</div>

The eyes and eyebrows are all very regular shapes, so I don't need to talk about them. The mouth can be broken down into 3 arcs, so let's draw an upward arc.

.mouth1 {
    width: 14px;
    height: 7px;
    border: 1px solid #000;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    border-top: none;
}

When the height is set to half of the width, a semi-circular arc can be drawn, and the height can be modified to change the size of the arc, and then the upper border is removed, and the opening upward arc is realized. Draw three arcs and position them relative to each other to form a mouth shape.

body

The body is just an ordinary rectangle, and the element level is set by z-index

<div class="body"></div>

.body {
    position: absolute;
    left: 14px;
    top: 67px;
    width: 55px;
    height: 130px;
    border: 1px solid #000;
    border-radius: 20%;
    border-bottom-width: 0;
    background-color: #fff;
    z-index: 5;
}

Right hand

The right hand is composed of upper arm, lower arm and 4 fingers

<div class="right-hand">
    <div class="right-hand1"></div>
    <div class="right-hand2"></div>
    <div class="finger1"></div>
    <div class="finger2"></div>
    <div class="finger3"></div>
    <div class="finger4"></div>
</div>

.right-hand1 {
    position: absolute;
    left: 10px;
    top: 0px;
    width: 20px;
    height: 60px;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    transform: rotate(-45deg);
    background-color: #fff;
    border-bottom-right-radius: 10px;
}

.right-hand2 {
    position: absolute;
    left: 9px;
    top: 35px;
    width: 18px;
    height: 60px;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    transform: perspective(14px) rotateX(-5deg) rotateZ(45deg);
    background-color: #fff;
    border-top-right-radius: 10px;
}

.right-hand2::after {
    position: absolute;
    left: -6px;
    top: 0px;
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 20px;
    background-color: #fff;

}

.finger1 {
    position: absolute;
    left: -17px;
    top: 74px;
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    border-top: none;
    transform: rotate(140deg);
}

Here the same border-bottom-right-radius: 10px; and border-bottom-right-radius: 10px; used to form a rounded corner to make the elbow look more natural. transform: perspective(14px) undergone a slight deformation, making the arm near the elbow a bit thicker and the palm arm a bit thinner. The fingers are also formed by rotating and positioning several arcs.

Buttocks

Two pieces of plump buttocks are also achieved through arcs.

<div class="buttocks">
    <div class="buttocks1"></div>
    <div class="buttocks2"></div>
</div>

.buttocks1 {
    position: absolute;
    top: 196px;
    left: 23px;
    width: 35px;
    height: 12px;
    border: 1px solid #000;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    border-top: none;
    transform: rotate(-56deg);
    z-index: 6;
}

.buttocks2 {
    position: absolute;
    top: 185px;
    left: 64px;
    width: 20px;
    height: 5px;
    border: 1px solid #000;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    border-top: none;
    transform: rotate(-110deg);
    z-index: 6;
}

Tail

The tail is indeed a bit difficult to do. It can't be realized by a straight arc. It can bend up and down, and finally realized it with 5 arcs.

<div class="tail-wrapper">
    <div class="tail tail1"></div>
    <div class="tail tail2"></div>
    <div class="tail tail3"></div>
    <div class="tail tail4"></div>
    <div class="tail tail5"></div>
</div>

.tail{
    position: absolute;
    border: 1px solid #222;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    border-top: none;
}
.tail1 {
    left: -31px;
    top: -11px;
    width: 80px;
    height: 8px
}
.tail2 {
    left: -31px;
    top: -3px;
    width: 80px;
    height: 8px;
}
.tail3 {
    left: 50px;
    top: -11px;
    width: 42px;
    height: 9px;
    transform: rotate(199deg);
}
.tail4 {
    left: 50px;
    top: -3px;
    width: 36px;
    height: 7px;
    transform: rotate(199deg);
}
.tail5 {
    left: 83px;
    top: 3px;
    width: 7px;
    height: 7px;
    transform: rotate(-12deg);
}

leg

The last leg also needs thick thighs and thin calves. transform: perspective() cannot achieve a similar effect, so it is good to draw two lines and rotate and position.

Summarize

At first, I looked at the picture of Nervous Cat and felt that it was not easy to draw with CSS. It took a few hours to get it out. It can't be said to be perfect, but the similarity is still higher. Can't help but sigh, CSS is really omnipotent!