CSS可以帮助我们很容易地画出小心心的图案。下面是一个简单的示例:
.heart { position: relative; width: 100px; height: 100px; transform: rotate(45deg); } .heart:before, .heart:after { content: ''; position: absolute; left: 0; top: 0; width: 50px; height: 80px; background-color: red; border-radius: 50px 50px 0 0; transform: rotate(-45deg); } .heart:before { left: -50px; } .heart:after { left: 50px; }
首先,我们创建一个样式名为"heart"的元素,并设置宽高为100px。然后我们将其旋转45度,这样我们就能够得到一个倾斜的正方形。接下来,我们可以使用:before和:after选择器来分别画出小心心的左半边和右半边。这里我们使用的技巧是将一个矩形设置为椭圆形的一半,这样就可以得到心形。
在:before选择器中,我们将其位置设为相对于"heart"元素的左侧50px,并使用负的45度旋转来让它倾斜。在:after选择器中,我们将其位置设为右侧50px,并使用同样的旋转来实现相同的效果。
最后,我们得到了一个美丽的小心心!这个小技巧可以通过调整元素的宽高比例、颜色和位置来进行定制。