Lass uns ein Herz mit CSS zeichnen

von | Okt 21, 2024 | Allgemein | 0 Kommentare

Schlagwörter: CSS - CSS3

Inhaltsverzeichnis

Wenn man eine Webseite designt, dann hat man viele Freiheiten die wir voll ausnützen dürfen. Wir entscheiden wie wir eine Webseite programmieren, denn es gibt keinen RICHTIGEN Weg – solange der Kunde zufrieden ist – ist alles erlaubt.

Eine dieser Freiheiten ist auch zu entscheiden ob wir ein Bild verwenden oder ob wir es mit CSS selbst zeichnen. Vorallem wenn ich Kunden sehe die Bilder von +1 GB Grösse in die Webseite einbinden wollen (weils gut aussieht) ists manchmal einfach eine bessere Idee das Ding selbst zu zeichnen.

Heute zeige ich euch also wie ihr ein Herz zeichnen könnt.

Ihr seht es sind gar nicht so viele Zeilen Code um dieses Resultat zu erzeugen

Video

HTML

1
2
3
<div class="container">
        <div class="herz"></div>
    </div>

CSS

Damit zentrieren wir den Container in der Browser Mitte-Mitte.

1
2
3
4
5
6
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

Und jetzt kommen wir zum Herz Teil:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.herz {
    position: relative;
    width: 100px;
    height: 100px;
}
 
.herz::before,
.herz::after {
    position: absolute;
    content: '';
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background-color: #ca0000;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
 
.herz::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

0 Kommentare

Einen Kommentar abschicken

Du kannst auf Fediverse-Profile verlinken, indem du fl:@benutzername in deinem Kommentar eingibst.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert