[分享]css3怎样画心形

如何使用CSS3画心形？其实很简单，只需几行代码即可实现。

.heart {
  position: relative;
  width: 100px;
  height: 90px;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.heart:before,
.heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: #ff5656;
  -moz-border-radius: 50px 50px 0 0;
  -webkit-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.heart:after {
  left: 0;
  -moz-border-radius: 0 50px 50px 0;
  -webkit-border-radius: 0 50px 50px 0;
  border-radius: 0 50px 50px 0;
} 

以上就是CSS3画心形的代码，我们可以通过修改宽度、高度、颜色等属性来优化心形的表现效果。

简单来说，我们通过一个div容器以及两个伪类元素:before和:after来实现心形的绘制，将它们设置为背景色码值为#ff5656的红色，同时做一些旋转和圆角处理就能得到一个非常可爱的心形图案。