Comment puis-je créer un arrière-plan divisé en deux couleurs en CSS ?

CSS : définir une couleur d'arrière-plan qui correspond à 50 % de la fenêtre

Essayer d'obtenir un arrière-plan sur une page qui est " divisé en deux" ; deux couleurs sur des côtés opposés ? Heureusement, il existe plusieurs façons d'obtenir cet effet, en fonction des exigences de prise en charge de votre navigateur.

Prise en charge des navigateurs plus anciens

Si la prise en charge des navigateurs plus anciens est indispensable, vous je devrai utiliser un div fixe supplémentaire qui remplit la moitié de l'écran et définir son arrière-plan couleur.

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink; 

Copier après la connexion

}

Navigateurs modernes

Si les navigateurs les plus récents sont votre seule préoccupation, vous en avez plus options :

Dégradé linéaire :

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);

Copier après la connexion