Comment créer plusieurs couleurs d'arrière-plan sur un seul élément DIV ?

Plusieurs couleurs d'arrière-plan sur un seul DIV

Réalisation d'une division de couleurs sur un élément DIV

Pour diviser un élément DIV en plusieurs sections de couleurs, ajustez le nombre de couleurs arrêter les valeurs dans votre dégradé linéaire. Par exemple, la création de deux sections nécessite trois couleurs, tandis que quatre couleurs sont nécessaires pour quatre sections. En spécifiant le pourcentage auquel chaque transition de couleur se produit, vous pouvez créer la division de couleur souhaitée.

Contrôle de la taille des sections de couleur

Pour rendre une section plus petite que la d'autres, utilisent le pseudo-élément CSS :after. Cet élément crée une superposition qui peut être dimensionnée et positionnée indépendamment. L'application d'une couleur d'arrière-plan contrastée à l'élément :after crée l'illusion d'une section de couleur plus petite sans diviser physiquement le DIV.

Voici des exemples améliorés avec une meilleure prise en charge entre navigateurs :

.two-colors {
  background: linear-gradient(
    to right,
    #9c9e9f 0%,
    #9c9e9f 50%,
    #f6f6f6 50%,
    #f6f6f6 100%
  );
}

B. Trois sections de couleur

.three-colors {
  background: linear-gradient(
    to right,
    #9c9e9f 0%,
    #9c9e9f 33%,
    #f6f6f6 33%,
    #f6f6f6 66%,
    #33ccff 66%,
    #33ccff 100%
  );
}

C. Section bleue plus petite

.smaller-blue {
  background: linear-gradient(
    to right,
    #9c9e9f 0%,
    #9c9e9f 50%,
    #33ccff 50%,
    #33ccff 100%
  );
  position: relative;
}

.smaller-blue:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 25%;
  height: 20%;
  background-color: white;
}

Ces exemples montrent comment obtenir plusieurs couleurs d'arrière-plan sur un seul élément DIV et contrôler leurs tailles à l'aide du pseudo-élément :after, offrant ainsi un moyen polyvalent de concevoir des couleurs complexes. modèles sans avoir besoin d’éléments HTML supplémentaires.

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!