The power of CSS: Draw pictures with a DIV_html/css_WEB-ITnose

These pictures are all drawn using a DIV. In fact, the principle is not complicated.

　These pictures are drawn by CSS, implemented through background-image overlay,

 Such as the implementation of mushroom heads, through radial-gradient radial gradient, linear -gradient linear gradients are implemented by superimposing each other, such as:

1

2

3

4

5

6

7

8

9

10

11

12

div {

width : 170px ;

height : 140px ;

background-image :

radial-gradient ( circle at 50% 120% , rgba( 0 , 0 , 0 , 0.7 ) 23% , rgba( 0 , 0 , 0 , 0 ) 48% ),

linear-gradient( 30 deg , rgba( 0 , 0 , 0 , 0.4 ) 10% , rgba( 0 , 0 , 0 , 0 ) 20% ),

radial-gradient( circle at 50% 33% , #f8f6f7 32% , rgba( 255 , 255 , 255 , 0 ) 32% ),

radial-gradient( circle at -13% 55% , #f8f6f7 20% , rgba( 255 , 255 , 255 , 0 ) 20% ),

radial-gradient( circle at 113% 55% , #f8f6f7 20% , rgba( 255 , 255 , 255 , 0 ) 20% ),

linear-gradient(to bottom , #ef0015 20 % , #b2000c 100% );

                                                                                                                                                                                               border-radius: 140px 140px 80px 80px;

The simultaneous occlusion relationship between front and rear is achieved through the background-image of :before and :after pseudo-elements.