The power of CSS: drawing with a div

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:

p {  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 (30deg, 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%, #b 2000c 100%);        border-radius:140px 140px 80px 80px;}

At the same time, there is the pass of the occlusion relationship: Before and: The background-image of After pseudo-element.

Online Demo: http://jsfiddle.net/ourjs/ed0ayybo/

PS: This approach does not fully support the old version of IE

Original address: http://a.singlep.com/?utm_source=ourjs.com

