CSS3 radial gradient ---- big fish eat small fish alone big fish-north wind blowing snow

CSS3 radial gradient ---- big fish eat fish alone big fish-north wind blowing snow recently infatuated with fishing, but the total catch not big fish, so draw a big fish to comfort me this weak soul.

First:

The above is the demo I will share with you tonight. I give him the name "big fish eat fish alone big fish ".

This big fish is divided into three parts: Head, tail, and eyes. First, let's take a look at the frame of this fish, as shown below, the class has been very straightforward.

First, let's take a look at the whole fish.

.fish{            display: inline-block;            position:relative;        }

The first step is to draw the fish head:

.fisg-head{            float: left;            width: 150px;            height: 150px;            border-radius: 100px;            background: radial-gradient(0px 100px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,white 113px,green 100px,green 100%);            background: -webkit-radial-gradient(0px 100px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,white 113px,green 100px,green 100%);            background: -moz-radial-gradient(0px 100px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,white 113px,green 100px,green 100%);            background: -ms-radial-gradient(0px 100px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,white 113px,green 100px,green 100%);            }

Step 2: Draw the tail:

.fisg-tail{            float: left;            width: 100px;            height: 100px;            transform: rotate(30deg);            -webkit-transform: rotate(30deg);            -moz-transform: rotate(30deg);            -ms-transform: rotate(30deg);            background: radial-gradient(100px 0px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,green 100px,green 100%);            background: -webkit-radial-gradient(100px 0px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,green 100px,green 100%);            background: -moz-radial-gradient(100px 0px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,green 100px,green 100%);            background: -ms-radial-gradient(100px 0px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,green 100px,green 100%);        }

The last step is to draw fish eyes

.fisg-head::after{            content:"";            display:block;            position:absolute;            top:20px;            left:35%;            width:20px;            height:20px;            border-radius:10px;            background:rgba(220, 245, 29,1);        }

Radial-gradient is a new feature of CSS3. Here I use one of the methods to implement this big fish. You may wish to share some other tips to broaden your horizons.

There will be other fish in the future. How can this problem be solved if there is only one fish?

Haha, it's 12 o'clock.