Zeichnen Sie ein Herz mit CSS3

<Text>
    <div id="Herz"></div>
</body>

#Herz{
       Höhe: 300px;
       Breite: 300px;
       Rand: 2px tief schwarz;
    }

     #Herz{
            Höhe: 200px;
            Breite: 200px;
            Rand: 2px tief schwarz;
            Position: relativ;
        }
    #Herz:vorher{
        Inhalt: '';
        Breite: 200px;
        Höhe: 200px;
        Rand: 2px tief schwarz;
        border-radius: 50%; // Quadrat mit abgerundeten Ecken wird zu einem Kreis position: absolute;
        left: -100px; // verschiebe das Quadrat um die Hälfte seiner Länge nach links}

    #Herz{
            Höhe: 200px;
            Breite: 200px;
            Rand: 2px tief schwarz;
            Position: relativ;
        }
        // Ich bin hier faul. Ich schreibe nur einen Block #heart:before, #heart:after {
        Inhalt: '';
        Breite: 200px;
        Höhe: 200px;
        Rand: 2px tief schwarz;
        Randradius: 50 %;
        Position: absolut;
        links: -100px;
    }
    // Für den zweiten Kreis müssen wir das Quadrat nur halb nach oben verschieben#heart:after{
        links: 0;
        oben: -100px;
    }

   /*Drehe das Herz und füge Farbe hinzu*/
  transformieren: drehen (45 Grad);
  Hintergrundfarbe: rot;

<Stil>
        Textkörper,html{
            Anzeige: Flex;
            Elemente ausrichten: zentrieren;
            Inhalt ausrichten: zentriert;
            Höhe: 100vh;
        }
        #Herz{
            Höhe: 200px;
            Breite: 200px;
            /*Rand: 2px durchgehend schwarz;*/
            Position: relativ;
            transformieren: drehen (45 Grad);
            Hintergrundfarbe: rot;
        }
        #Herz:vorher,#Herz:nachher{
            Inhalt: '';
            Breite: 200px;
            Höhe: 200px;
            /*Rand: 2px durchgehend schwarz;*/
            Randradius: 50 %;
            Position: absolut;
            links: -100px;
            Hintergrundfarbe: rot;
        }
        #Herz:nach{
            links: 0;
            oben: -100px;
        }
    </Stil>
</Kopf>
<Text>
    <div id="Herz"></div>
</body>