CSS Draw Red Love

This time to bring you CSS to draw a red love, CSS draw a red love attention to what matters, the following is the actual case, together to see.

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;        }
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS3 multi-class selector using detailed

CSS background-attachment use of the detailed

Bootstrap Realization Price List