css爱心

<div class="love">
    <span class="leftlove"></span>
    <span class="rightlove"></span>

</div>

    .love{position:relative;}   //通过position来定位，调整位置
    .love >span{
position:absolute;
display:inline-block;
width:30px;height:50px;
border-radius:30px 30px 0 0;
        background-color:#DB7C6D;
}
.love .leftlove{left:0px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}
.love .rightlove{left:15px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}

还有一种方法，只要一个div。在之前before和after分别添加内容使它和上面那样写div leftlove和rightlove一样。

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

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

但是总感觉下面的不好。说不出来可能是逻辑没太懂。推荐上面的。