纯css3爱心 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<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>
</body>
</html>

 

posted @ 2015-12-04 14:49  像风一样自由~~~  阅读(540)  评论(0)    收藏  举报