css画爱心(css如何画爱心图)

CSS 是前端开发不可缺少的技术之一，除了常规的布局样式，还可以用它来画图形。今天我们来学习一下如何用 CSS 来画爱心图。

.heart {
position: relative;
width: 100px;
height: 90px;
}
.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%;
}

首先，我们需要一个指定大小的容器，我们给它取名为 .heart，并设置它的宽度为 100px，高度为 90px。这个容器就相当于画布，我们将在其中绘制出爱心图案。

接下来，我们使用 :before 和 :after 伪元素来画出左右两侧的半圆形。其中，设置了 content 属性为空，即不显示内容，只用于定位。我们将这两个半圆形都定位到容器的顶部中间，并设置宽度为 50px，高度为 80px。设置了一个背景色为红色的渐变色，用来代表爱心的颜色。同时，为了让半圆形既可爱又有立体感，我们使用了 border-radius 属性来设置四个角的圆角半径，并使用 transform 属性来旋转这两个半圆形。

最后，我们再设置一个 :after 伪元素，用来画出爱心的右侧半圆形。它与左侧的半圆形形状相同，只需要将 left 属性设为 0，并将 transform 属性的 rotate() 方法中的角度改为 45deg，就能设定它的旋转角度了。同时，为了让它从右侧衔接到左侧，我们要设置 transform-origin 属性，让它的旋转中心点在右侧的底部。

这样，我们就完成了用 CSS 绘制爱心图案的过程，得到的效果如下所示：