Comment utiliser CSS pour implémenter une tête de canard (avec code)

Le contenu de cet article explique comment utiliser CSS pour réaliser une tête de canard (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Aperçu de l'effet

Téléchargement du code source

https://github.com/comehope/front- fin-daily-challenges

Interprétation du code

Define dom, le conteneur contient 4 éléments :

<figure>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</figure>

Affichage centré :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: papayawhip;
  }

Define taille du conteneur :

.duck {
    width: 10em;
    height: 10em;
}

Utilisez la grille pour presser 4 carrés dans une disposition 2*2 :

.duck {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.duck span {
    background-color: seagreen;
}

Faites pivoter le conteneur de 45 degrés :

.duck {
    transform: rotate(-45deg);
}

Paramètres Coins arrondis de chaque carré, combinés dans la forme abstraite d'un canard :

.duck span:nth-child(1) {
    border-top-left-radius: 100%;
}

.duck span:nth-child(2) {
    border-top-right-radius: 100%;
}

.duck span:nth-child(3) {
    border-bottom-right-radius: 100%;
}

.duck span:nth-child(4) {
    border-bottom-left-radius: 100%;
}

Définissez une couleur différenciée pour le dernier carré pour le faire ressembler à un bec de canard :

.duck span:nth-child(4) {
    background-color: coral;
}

Dessinez un pointez sur le deuxième carré en utilisant un dégradé radial pour représenter les yeux du canard :

.duck span:nth-child(2) {
    background-image: radial-gradient(black 0.5em, transparent 0.5em);
}

Vous avez terminé !

Recommandations associées :

Comment utiliser du CSS pur pour implémenter un Angry Bird noir (avec code)

Comment utiliser CSS et D3 réalise l'effet d'animation de chevauchement noir et blanc

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!