1. An overview of the

Recently, I shared with you the process of drawing the Octopus cat Logo on Github using CSS3.

Let’s start with a panorama

It is common to see circles, ellipses, and triangles implemented through the border property on the web. The main use here is the CSS border property. Set the rounded corners of the rectangle with border-radius.

Border-radius specifies a maximum of four values: top left, top right, bottom right, and bottom left. You can also set the value of each Angle separately, and it can be accurate to the X and Y axis of the Angle.

/ / the top left cornerborder-top-left-radius: 40px 80px; / / the top right cornerborder-top-right-radius: 40px 80px; / / the bottom left cornerborder-bottom-right-radius: 40px 80px; / / the bottom right hand cornerborder-bottom-left-radius: 40px 80px;
Copy the code

40px and 80px indicate that the part of the X-axis involved in bending is 40px and the part of the Y-axis involved in bending is 80px, respectively.

2. Start drawing

All parts of octopi are drawn using div element tags and then combined by positioning, first drawing the outline of the head. Create a pie face by setting rounded corners at four angles.

position: absolute;
border: 1px solid red;
width: 268px;
height: 204px;
left: 116px;
top: 77px;
border-top-left-radius: 137px 94px;
border-top-right-radius: 137px 94px;
border-bottom-left-radius: 105px 95px;
border-bottom-right-radius: 104px 82px;
Copy the code

Add ears.

position: absolute;
border: 1px solid red;
width: 60px;
height: 60px;
transform: rotate(12deg);
top: 66px;
left: 133px;
border-top-right-radius: 150px 36px;
border-bottom-left-radius: 43px 95px;
Copy the code

Facial features

beard

position: absolute; 
height: 8px;
width: 98px;
top: 222px;
left: 26px;
border-top-left-radius: 98px 10px;
border-top: 1px solid red;
Copy the code

Four legs and a small tail can be set using the border property.

border-right: 6px solid red;
width: 100px;
height: 70px;
border-bottom-right-radius: 70px 70px;
Copy the code

But this is a lazy way to draw it in modules.

3. Fill in the color

Add color when the whole thing is finished.

It’s getting pretty good. Go on

Finish with a little tail!

Done!