請使用支持CSS3的浏覽器,例如Chrome,IE9以上,火狐。效果如下:
完整源代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3畫愛心-</title>
<style>
.heart_keleyi_com{width: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;width: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;width: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>
<div><a href="http:///a/bjac/o10hnpxg.htm" target="_blank">原文</a></div>
</body>
</html>