How CSS implements the sample code sharing for the love of painting

Today Xiao Ying to everyone to share a love with CSS painting, the bottom of the code and production process, I hope to help you.

The first step:


Draw a square first.

<! DOCTYPE html>
Step Two:

will take advantage of pseudo-elements before and: After, draw a square on the left and top of the square, then use the border-radius:50% property, decorate the two squares, and then get two circles:





. Heart-shape:before,        . heart-shape:after {            position:absolute;            Content: ";            width:100px;            height:100px;            Background-color: #ffc0cb;        }        . Heart-shape:before {left            : -45px;        }        . Heart-shape:after {            top: -45px;        }

Use of border-radius:50%; Property:

. Heart-shape:before,        . heart-shape:after {            position:absolute;            Content: ";            width:100px;            height:100px;            -webkit-border-radius:50%;            /** compatible with Apple, Google, and other browsers recognize */            -moz-border-radius:50%;            /** compatible with Firefox */            -o-border-radius:50%;            /** compatible with Opera browser */            border-radius:50%;            Background-color: #ffc0cb;        }
Step Three:

The class name is: Heart-shape P uses transform:rotate (45DEG); property to rotate them 45 degrees,:




. heart-shape {            position:relative;            width:100px;            height:100px;            Background-color: #f70e0e;            -webkit-transform:rotate (45deg);            /* Safari and Chrome *            /-moz-transform:rotate (45deg);            /* Firefox *            /-ms-transform:rotate (45deg);            /* IE 9 *            /-o-transform:rotate (45deg);            /* Opera *            /Transform:rotate (45DEG);        }
Xiao Ying round the background color and the background color of the square does not give a uniform color, is for everyone to see the obvious, the next little Ying set its background color into a unified, the ultimate love came out,:




. Heart-shape:before,        . heart-shape:after {            position:absolute;            Content: ";            width:100px;            height:100px;            -webkit-border-radius:50%;            /** compatible with Apple, Google, and other browsers recognize */            -moz-border-radius:50%;            /** compatible with Firefox */            -o-border-radius:50%;            /** compatible with Opera browser */            border-radius:50%;            Background-color: #f70e0e;        }