html+css制作心形

学习过html和css之后我们可以尝试做一些小效果，比如说制作心形图案。
效果大概就像是这样

整体形状我们可以理解为一个正方形，在它的上边和右边分别创建一个圆形，最后再将整体旋转就可以做成一个爱心的效果了

原理大概就是如此，只需要我们将最后的颜色全部调成一个颜色，再整体旋转45度就可以了。


下面我们附上具体代码，我提供了两种方式，第一种是使用伪类元素来做，第二种是在一个div里面设置两个span标签。
方法一：

<div class="one"></div>

.one{
  position:relative;
  width:100px;
  height:100px;
  background:pink;
  margin-left:100px;
  margin-top:100px;
  transform:rotate(-45deg);
  
}
.one:before{
  content:"";
  position:absolute;
  width:100px;
  height:100px;
  background-color:pink;
  border-radius:50%;
  top:-50px;
	left:0;
}
.one:after{
  content:"";
  position:absolute;
  background-color:pink;
  border-radius:50%;
  height:100px;
  width:100px;
  left:50px;
  top:0;
}

通过使用伪类元素 ：after和：before，通过定位将他们的位置放在正确的位置上，最后再加一个旋转就可以制作一个爱心。当然在爱心中间我们也可以添加一些文字，通过在div中写一个span标签，并对span元素进行操作，就可以将文字元素添加在想要添加的位置上

<div class="one">
  <span id="content">I love you</span>
</div>

#content{
 position:absolute;
  top:20px;
  left:25px;
  z-index:2;
  font-size:15px;
  transform:rotate(45deg);
}

方法二：在div中设置两个span
与第一个方法大同小异，
在这里就不过多解释，直接附上代码：

<div class="two">
  <span id="first"></span>
  <span id="second"></span>
</div>

.two{
  position:relative;
  width:50px;
  height:50px;
  background:#7FFFD4;
  left:400px;
  top:-40px;
  transform:rotate(-45deg);
}
#first{
  position:absolute;
  width:50px;
  height:50px;
  border-radius:50%;
  background:#7FFFD4;
  left:0px;
  top:-25px
}
#second{
  position:absolute;
  width:50px;
  height:50px;
  border-radius:50%;
  background:#7FFFD4;
  left:25px;
  top:0px
}

同样也可以达到我们想要的效果，我们还可以通过js去绑定一些事件来制作一些与众不同的效果。