These pictures are drawn with a div, but the principle is not complicated.
These images are drawn from CSS, implemented by Background-image overlay,
such as the implementation of the mushroom head, through the radial-gradient radial gradient, linear-gradient linear gradient superimposed on each other to achieve, such as:
123456789101112 |
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
;
}
|
Online Demo: here
At the same time, there is the pass of the occlusion relationship: Before and: The background-image of After pseudo-element.
PS: This approach does not fully support the old version of IE
Original address: Click here
The power of CSS: drawing with a div