[分享]css3怎么画心

CSS3是一个非常强大的网页样式设计语言，可以让我们实现很多很酷的效果，比如我们可以用CSS3来画出一个心形图案。.heart { : relative; width: 100px; height: ...

CSS3是一个非常强大的网页样式设计语言，可以让我们实现很多很酷的效果，比如我们可以用CSS3来画出一个心形图案。

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

.heart:before,
.heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
} 

在上面的代码中，我们先创建了一个height和width分别为90px和100px的元素，然后通过rotate属性将它进行了旋转，让它变成了一个旋转了45度的正方形。

接下来，我们再创建两个伪元素:before和:after，在它们的样式中设置了background为红色，通过border-radius属性实现了圆角，然后再次利用rotate属性对它们进行了旋转，一个负角度一个正角度，最终呈现出两个半圆形，同时使用left和top属性调整它们的位置。最后一个:before元素用来制作心形的左侧，一个:after元素用来制作右侧。

这样，我们就用CSS3画出了一只可爱的心形图案啦！