html+css实现爱心制作，通俗易懂

今天刚好是母亲节，祝全天下的母亲节日快乐幸福~

前端工程师怎么能不懂骚操作？制作爱心有很多方法可以实现，今天介绍本人认为目前最简单的方法，仅依靠html+css。

一、先看看html结构，仅需一个容器和爱心元素，容器主要作用为相对定位，方便子元素爱心进行绝对定位调整。

<div class="heartCon">
	<div class="heart"></div>
</div>

二、进行css部分。刚说到heartCon给个相对定位先，然后就是爱心元素了，这里用到了伪类before和after，节省代码和方便调整。其实样式不多，首先是宽高，其次背景颜色，接着给它们绝对定位以备后面的位置调整，最后将上方两个角设置圆角，弧度为50%。

.heartCon {
    position: relative;
}
.heart::before, .heart::after {
    content: "";
    width: 30px;
    height: 45px;
    background-color: red;
    position: absolute;
    border-radius: 15px 15px 0 0;
}

现在的样子应该是这样，两个伪类元素重叠着，但已经有点意思了。

三、最后一步，作css3调整。先将两个伪类元素分别旋转角度45°和-45°，然后根据实际情况调整位置偏移，使两个伪类重叠至刚好形成爱心。

.heart::before {
    transform: rotate(-45deg);
}
.heart::after {
    transform: rotate(45deg);
    left: 10px;
}

ok爱心完成，并不复杂，快用心写个爱心送给母亲吧~