Créer un cœur en HTML / CSS

Voici un exemple simple de comment créer un cœur en utilisant uniquement HTML et CSS.
Le cœur est formé à partir d'une div principale et de ses pseudo-éléments pour les lobes.
Survolez le cœur pour pouvoir le faire battre !

Explication du code :

- La div avec la classe "heart" forme la base du cœur, qui est inclinée à -45 degrés pour créer la forme de base.
- Les pseudo-éléments ::before et ::after sont utilisés pour créer les deux lobes du cœur, positionnés de manière à compléter la forme.
- Un effet de "pouls" est ajouté au survol grace au keyframes pour rendre le cœur plus interactif et vivant.

Code CSS utilisé pour créer le cœur :

 
 .heart {
            width: 100px;
            height: 100px;
            background: #e63946;
            /* couleur du cœur */
            position: relative;
            transform: rotate(-45deg);
            /* inclinaison pour la base du cœur */
            transform-origin: center;
            margin: 60px auto;
            /* centrage simple dans la page */
            border-radius: 12px;
            /* adoucit légèrement les angles */
        }

        /* Les deux "lobes" du cœur */
        .heart::before,
        .heart::after {
            content: "";
            position: absolute;
            width: 100px;
            height: 100px;
            background: #e63946;
            border-radius: 50%;
        }

        /* Lobe du haut (gauche visuel, mais rappel : le parent est incliné) */
        .heart::before {
            top: -50px;
            left: 0;
        }

        /* Lobe du haut (droite visuel) */
        .heart::after {
            left: 50px;
            top: 0;
        }

        /* Optionnel : petit effet "pouls" au survol */
        .heart:hover {
            animation: beat 0.6s ease-in-out infinite alternate;
        }

        @keyframes beat {
            from {
                transform: rotate(-45deg) scale(1);
            }

            to {
                transform: rotate(-45deg) scale(1.10);
            }
        }s