小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

绘制

明天就是国庆节了，画一个心形，祝福祖国。

容器

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

绘制心形我们准备一个div元素足以，接下来就是它的变身时刻。

样式

一颗热心祝祖国，繁荣昌盛正蓬勃。心形如何实现呢？我们可以利用一个正方形和两个半圆来实现这个效果。

心形容器

我们需要准备一个容器，即一个正方形，然后把它旋转 45deg。当然，开始写的时候建议你把两个半圆加上去后在旋转。

.heart {
    --size: 100px;
    --color: red;
    height: var(--size);
    position: relative;
    transform: rotate(45deg);
}

.heart,
.heart::before,
.heart::after {
    width: var(--size);
    background-color: var(--color);
}

心形耳朵

两个半圆用的伪元素实现的，两个半圆就像两个耳朵，然后我们把它们挂到正方形上。

.heart::before,
.heart::after {
    content: '';
    height: calc(var(--size) * 0.5);
    position: absolute;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
}

.heart::before {
    top: calc(var(--size) * -0.5);
}

.heart::after {
    left: calc(var(--size) * -0.5);
    transform: rotate(-90deg);
    transform-origin: center bottom;
}

心形

一个方方形，挂上俩耳朵，你若去旋转，便是心效果。

总结

这里写的是一个比较方正的心形图案，大小随--size的变化而变化。你可以尝试把心形变得更加有弧度，如果完成了，请来告诉我。

想了解其他动画效果，请前往《有趣的动画》 专栏，希望对你有所帮助。