如何使用 CSS 制作一個簡易愛心

W3cschool小編 2022-11-11 10:51:14 瀏覽數(shù) (3931)

反饋

怎么使用 CSS 繪制一個愛心【附愛心代碼】

分析：

愛心可以通過一個正方形+兩個圓形組合成。

先畫一個正方形+圓形, 擺放位置如下:

再添加上一個圓形。

最后再將整個圖形順時針旋轉(zhuǎn)45度即可。

初步實(shí)現(xiàn)

先畫一個正方形：

   <body>
       <div id="heart"></div>
   </body>

   #heart{
          height: 300px;
          width: 300px;
          border: 2px solid black;
       }

給這個正方形的左邊加行一個圓形.這里使用偽類:before來實(shí)現(xiàn)：

        #heart{
               height: 200px;
               width: 200px;
               border: 2px solid black;
               position: relative;
           }
       #heart:before{
           content: '';
           width: 200px;
           height: 200px;
           border: 2px solid black;
           border-radius: 50%; // 正方形加圓角變成圓
           position: absolute;
           left: -100px;  // 向左位移正方形一半的長度
       }

此時圖形長這樣：

再添加一個圓形, 這里使用after偽類來實(shí)現(xiàn)。

      #heart{
               height: 200px;
               width: 200px;
               border: 2px solid black;
               position: relative;
           }
           // 這里偷個懶.直接寫一塊了
       #heart:before,#heart:after{
           content: '';
           width: 200px;
           height: 200px;
           border: 2px solid black;
           border-radius: 50%;
           position: absolute;
           left: -100px;
       }
       // 第二個圓, 只需要向上位移正方形一半的高度
       #heart:after{
           left: 0;
           top: -100px;
       }

最后一步, 旋轉(zhuǎn)一下, 然后上個顏色.去掉之前為了看清楚加的邊框。

      /*給heart進(jìn)行旋轉(zhuǎn)并加上顏色*/
     transform: rotate(45deg);
     background-color: red;

完整代碼：

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


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        html {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }


        #heart {
            height: 200px;
            width: 200px;
            /*border: 2px solid black;*/
            position: relative;
            transform: rotate(45deg);
            background-color: red;
        }


        #heart:before,
        #heart:after {
            content: '';
            width: 200px;
            height: 200px;
            /*border: 2px solid black;*/
            border-radius: 50%;
            position: absolute;
            left: -100px;
            background-color: red;
        }


        #heart:after {
            left: 0;
            top: -100px;
        }
    </style>
</head>


<body>
    <div id="heart"></div>
</body>


</html>

HTML

10 人點(diǎn)贊