css3实现爱心图标

使用伪元素实现

使用一个div

 1 <div class="heart-shape"></div> 

css样式设置

1 .heart-shape{position:relative;width:30px;height:30px;background-color:red;border-radius:3px;transform:rotate(45deg);top:50%;left:50%;margin:-15px;}
2 .heart-shape:before{content:'';position:absolute;width:30px;height:30px;background-color:red;border-radius:50%;top:0px;left:-15px;}
3 .heart-shape:after{position:absolute;width:30px;height:30px;content:'';background-color:red;border-radius:50%;left:0px;top:-15px;}

 

posted @ 2017-02-13 10:40  eva_Tang  阅读(2994)  评论(0)    收藏  举报