Dessin d'Angry Birds en CSS

290 928491465

Ouvrir dans l'éditeur Publiez votre code

Recommandé

30 January 2026

Exemple de barre de navigation réactive en CSS pur

18 September 2025

Extrait HTML d'animation de fenêtre CSS

6 March 2026

Art génératif interactif - Toile de soie

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angry Bird CSS</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #87ceeb;
            overflow: hidden;
        }

.bird-container {
            position: relative;
            width: 200px;
            height: 200px;
        }

/* Body */
        .body {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #e53935;
            border-radius: 50%;
            border: 4px solid #000;
            overflow: hidden;
            z-index: 2;
        }

/* Belly */
        .belly {
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 160px;
            height: 100px;
            background-color: #f5f5dc;
            border-radius: 50%;
            border: 4px solid #000;
        }

/* Eyes */
        .eye {
            position: absolute;
            top: 60px;
            width: 45px;
            height: 45px;
            background-color: white;
            border-radius: 50%;
            border: 3px solid #000;
            z-index: 5;
        }

.eye.left { left: 55px; }
        .eye.right { right: 55px; }

.pupil {
            position: absolute;
            top: 15px;
            width: 12px;
            height: 12px;
            background-color: #000;
            border-radius: 50%;
        }

.eye.left .pupil { right: 5px; }
        .eye.right .pupil { left: 5px; }

/* Eyebrows */
        .eyebrow {
            position: absolute;
            top: 50px;
            width: 60px;
            height: 18px;
            background-color: #000;
            z-index: 6;
        }

.eyebrow.left {
            left: 45px;
            transform: rotate(20deg);
        }

.eyebrow.right {
            right: 45px;
            transform: rotate(-20deg);
        }

/* Beak */
        .beak {
            position: absolute;
            top: 95px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 7;
        }

.beak-top {
            width: 0;
            height: 0;
            border-left: 35px solid transparent;
            border-right: 35px solid transparent;
            border-bottom: 40px solid #fbc02d;
            position: relative;
        }

.beak-top::after {
            content: '';
            position: absolute;
            bottom: -44px;
            left: -35px;
            width: 0;
            height: 0;
            border-left: 35px solid transparent;
            border-right: 35px solid transparent;
            border-top: 15px solid #f9a825;
        }

/* Hair/Feathers */
        .hair {
            position: absolute;
            top: -20px;
            left: 80px;
            width: 30px;
            height: 50px;
            background-color: #e53935;
            border: 4px solid #000;
            border-radius: 50% 50% 0 0;
            transform: rotate(-15deg);
            z-index: 1;
        }

.hair::after {
            content: '';
            position: absolute;
            left: 15px;
            top: 5px;
            width: 25px;
            height: 40px;
            background-color: #e53935;
            border: 4px solid #000;
            border-radius: 50% 50% 0 0;
            transform: rotate(30deg);
        }

/* Tail */
        .tail {
            position: absolute;
            left: -25px;
            top: 90px;
            width: 30px;
            height: 10px;
            background-color: #000;
            box-shadow: 0 15px 0 #000, 0 -15px 0 #000;
            z-index: 1;
        }
    </style>
</head>
<body>

</body>
</html>

CSS