<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>CSS3爱心</title> <style> .heart_keleyi_com{ 160px; height:200px; position:relative } .heart_keleyi_com:before{ content:" "; border: 0 solid transparent; -moz-border-radius:100px; -webkit-border-radius:100px; border-radius:100px 100px 0 0; 80px; height:120px; background:#ff0000; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); position:absolute; left:20px; } .heart_keleyi_com:after{ content:" "; border: 0 solid transparent; -moz-border-radius:100px; -webkit-border-radius:100px; border-radius:100px 100px 0 0; 80px; height:120px; background:#ff0000; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); position:absolute; left:48px; top:0px; } </style> </head> <body> <div class="heart_keleyi_com"></div> </body> </html>