[分享]css两个长方形画爱心

CSS是网页设计中不可或缺的一种语言，它可以对网页中的各种元素进行样式美化。今天我们来探讨一个使用CSS画爱心的例子。 .heart { : relative; width: 100px; heigh...

CSS是网页设计中不可或缺的一种语言，它可以对网页中的各种元素进行样式美化。今天我们来探讨一个使用CSS画爱心的例子。

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

    .heart::before,
    .heart::after {
        content: "";
        position: absolute;
        background-color: #f00;
    }

    .heart::before {
        width: 50px;
        height: 80px;
        top: -35px;
        left: 0;
        border-radius: 50px 50px 0 0;
    }

    .heart::after {
        width: 50px;
        height: 80px;
        top: -35px;
        right: 0;
        border-radius: 50px 50px 0 0;
    } 

代码中定义了一个类名为“heart”的元素，这个元素是一个长方形，但由于设置了旋转角度，所以看起来是一个菱形。接下来使用before和after伪元素来分别绘制两个半圆形，从而组成了一个爱心的形状。

下面是HTML代码和效果图：

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

以上就是使用CSS画爱心的简单例子，当然，如果你想更加逼真的话，还可以通过一些其他的技巧来实现。CSS是一门非常强大的语言，掌握它对于网页设计和开发来说是非常重要的。