CSS 画爱心

最新推荐文章于 2023-03-13 19:10:25 发布

Bigfishseasugar

最新推荐文章于 2023-03-13 19:10:25 发布

阅读量2.4k

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/weixin_42207975/article/details/109084178

版权

这篇博客展示了如何利用HTML和CSS的盒模型特性，结合旋转和定位技巧，创建一个心形图案。通过调整边框宽度和圆角半径，组合三个不同形状（两个圆形和一个正方形），并进行适当的位置移动，最终形成一个逼真的爱心图标。代码示例中详细解释了每个部分的作用，适合前端开发者学习和实践。

摘要由CSDN通过智能技术生成

在学习完盒模型后，我们得知可以利用盒子的border属性绘制三角形、正方形和圆形等。但如果要绘制爱心可咋整？

那不简单？两个圆加上一个正方形，再移动位置最终就可以组合（叠）成一个爱心了。

话不多说，直接上效果图以及代码。

效果图

左图为移动后；

右图为移动后把所有盒子颜色改为红色；

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #outer {
            position: fixed;
            transform: rotate(45deg);
            left: 200px;
        }
        
        #div1 {
            position: fixed;
            top: 0;
            left: 100px;
            height: 0px;
            width: 0px;
            border: 100px solid red;
            border-radius: 100px;
        }
        
        #div2 {
            position: fixed;
            top: 100px;
            left: 0;
            height: 0px;
            width: 0px;
            border: 100px solid red;
            border-radius: 100px;
        }
        
        #div3 {
            position: fixed;
            top: 100px;
            left: 100px;
            height: 0px;
            width: 0px;
            border: 100px solid red;
        }
    </style>
</head>

<body>
    <div id="outer">
        <div id="div1">
        </div>
        <div id="div2">
        </div>
        <div id="div3">
        </div>
    </div>
</body>

</html>