Home > Developer > Web Develop
Use CSS to draw love, although this method will write a lot of CSS code, but after successful, there will be a very satisfying sense of accomplishment.
Love, can have 3 regular geometric shapes, a square plus two circle or semicircle of the same radius. A isosceles triangle plus two circle, two room type overlay, all line.
My implementation is to choose the simplest square plus two circles of the same radius. First create a div with a class named Heart, and then fix the width, height, and background color for it. Then through the pseudo-class selector: Before and: After adding content: '; Specifies that the width and height are the height of the previous div, the background color is the same as the previous Div, and the Border-radius is rounded by a half of that value that is greater than the height and width equivalent. Then the value of the two round position value is set to absolute,div values of relative; by absolute method, put: Before and: After one top: half of the aspect equals the negative number, left:0; the other top:0, Left: Half of the aspect equals the value. Such a inverted heart shape is painted well. Finally, we can get a heart shape by rotating the div. When div aspect equals, the angle of rotation is-45 degrees. by Transform:rotate ( -45deg), but this transform need to use the other prefix, can be used prefixer plug-in, or CSS3 please find the corresponding prefix. The following is the complete code:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>CSS Heart</title>6 <style>7 Div.heart{8 margin:100px;9 width:40px;Ten Height:40px; One background:#E74C3C; A -webkit-transform:Rotate ( -45deg); - -moz-transform:Rotate ( -45deg); - -ms-transform:Rotate ( -45deg); the -o-transform:Rotate ( -45deg); - Transform:Rotate ( -45deg); - position:relative; - } + Div.heart:before,div.heart:after{ - position:Absolute; + content:"'; A width:40px; at Height:40px; - background:#E74C3C; - -moz-border-radius:20px; - Border-radius:20px; - } - Div.heart:before{ in Top:-20px; - Left:0; to } + Div.heart:after{ - Top:0; the Left:20px; * } $ </style>Panax Notoginseng </Head> - <Body> the <Divclass= "Heart"></Div> + </Body> A </HTML>View Code
CSS painting love
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
