css实现的心形图标

1	<div class= "heart icon" ></div>

.heart. icon  {

   color :  #000 ;

   position :  absolute ;

   margin-top :  6px ;

   margin-left :  5px ;

   width :  9px ;

   height :  9px ;

   border-left :  solid  1px  #999;

   border-bottom :  solid  1px  #999;

   -webkit-transform: rotate( -45 deg);

           transform: rotate( -45 deg);

}

 

.heart.icon:before {

   content :  '' ;

   position :  absolute ;

   top :  -5px ;

   left :  -1px ;

   width :  8px ;

   height :  5px ;

   border-radius:  5px  5px  0  0 ;

   border-top :  solid  1px  #999;

   border-left :  solid  1px  #999;

   border-right :  solid  1px  #999;

}

 

.heart.icon:after {

   content :  '' ;

   position :  absolute ;

   top :  0px ;

   left :  8px ;

   width :  5px ;

   height :  8px ;

   border-radius:  0  5px  5px  0 ;

   border-top :  solid  1px  #999;

   border-right :  solid  1px  #999;

   border-bottom :  solid  1px  #999;

}