在CSS中,绘制一个心形是一项比较有趣的挑战。下面将介绍如何使用CSS代码绘制一个漂亮的心形。
.heart { width: 100px; height: 100px; position: relative; } .heart:before, .heart:after { content: ""; position: absolute; top: 0; left: 50px; width: 50px; height: 80px; background-color: 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%; }
首先创建一个具有相对位置的div,然后将伪元素:before和:after设置为绝对位置。伪元素:before和:after代表心形的两个半边。其中:before用blue作为背景颜色,并将其旋转45度,并使用transform-origin属性将其定位正确。:after也是类似的过程,只不过将其旋转另一个方向。最后,将宽度和高度调整为适当的大小,就可以看到一个漂亮的心形了。