CSS3でハートを描く

成果を達成する

要件/機能:

CSS + HTML を使用してハートを描く方法。

分析:

正方形と 2 つの円を組み合わせるとハートが形成できます。
まず正方形と円を描き、次のように配置します。

もう一つの円を追加します。

最後に、図形全体を時計回りに 45 度回転させます。

初期実装:

まず正方形を描きます。

<本文>
    <div id="ハート"></div>
</本文>

＃心臓{
       高さ: 300px;
       幅: 300ピクセル;
       境界線: 2px 黒一色;
    }

正方形の左側に円を追加します。これを実現するには、疑似クラス before を使用します。

     ＃心臓{
            高さ: 200px;
            幅: 200ピクセル;
            境界線: 2px 黒一色;
            位置: 相対的;
        }
    #ハート:前{
        コンテンツ： '';
        幅: 200ピクセル;
        高さ: 200px;
        境界線: 2px 黒一色;
        border-radius: 50%; // 角が丸い四角形は円になります。position: absolute;
        left: -100px; // 正方形を半分の長さだけ左にシフトします}

グラフは次のようになります。

別の円を追加します。ここでは、after 疑似クラスを使用してこれを実現します。

    ＃心臓{
            高さ: 200px;
            幅: 200ピクセル;
            境界線: 2px 黒一色;
            位置: 相対的;
        }
        // ここでは面倒なので、1 つのブロックだけ書きます #heart:before、#heart:after {
        コンテンツ： '';
        幅: 200ピクセル;
        高さ: 200px;
        境界線: 2px 黒一色;
        境界線の半径: 50%;
        位置: 絶対;
        左: -100px;
    }
    // 2 番目の円では、四角形を半分だけ上に移動する必要があります#heart:after{
        左: 0;
        上: -100px;
    }

最後のステップは、回転させて色を追加することです。より明確にするために、追加された境界線を削除します。

   /*ハートを回転させて色を付ける*/
  変換: 回転(45度);
  背景色: 赤;

完全なコード:

<スタイル>
        本文、html{
            ディスプレイ: フレックス;
            アイテムの位置を中央揃えにします。
            コンテンツの中央揃え: 中央;
            高さ：100vh;
        }
        ＃心臓{
            高さ: 200px;
            幅: 200ピクセル;
            /*境界線: 2px 黒一色;*/
            位置: 相対的;
            変換: 回転(45度);
            背景色: 赤;
        }
        #ハート:前、#ハート:後{
            コンテンツ： '';
            幅: 200ピクセル;
            高さ: 200px;
            /*境界線: 2px 黒一色;*/
            境界線の半径: 50%;
            位置: 絶対;
            左: -100px;
            背景色: 赤;
        }
        #ハート:後{
            左: 0;
            上: -100px;
        }
    </スタイル>
</head>
<本文>
    <div id="ハート"></div>
</本文>