The process of using CSS to draw love

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;        }

The above is a small series to introduce you to the use of CSS painting love process, I hope to help you, if you have any questions please give me a message, small series will promptly reply to you. Thank you very much for your support for topic.alibabacloud.com!