Comment créer un fond de bordure avec 2 couleurs différentes?

Question

Je dois créer fond de frontière avec deux couleurs différentes comme image ci-dessous

comment créer le css?

thx u

Answer 1

Vous pouvez utiliser des classes CSS pseudo i.e. :after ou :before.

h3 { 
 
    margin: 0; 
 
    padding-bottom: 7px; 
 
    position: relative; 
 
    border-bottom: 2px solid #ccc; 
 
} 
 

 
h3:before { 
 
    position: absolute; 
 
    background: brown; 
 
    height: 2px; 
 
    content: ''; 
 
    width: 50px; 
 
    bottom: -2px; 
 
    left: 0; 
 
}

<h3>Last Recent Post</h3>

Et vous pouvez utiliser gradient css ainsi:

h3 { 
 
    margin: 0; 
 
    padding-bottom: 7px; 
 
    position: relative; 
 
} 
 

 
h3:before { 
 
    position: absolute; 
 
    background: linear-gradient(to right, brown 50px, #ccc 50px); 
 
    height: 2px; 
 
    content: ''; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
}

<h3>Last Recent Post</h3>

Answer 2

utilisation box-shadow avec zéro flou

syntaxe: box-shadow: décalage x y-offset couleur flou de rayon

exemple: box-shadow 0 0 0 1em rouge 0 0 0 2em orange.

Ceci émulera une bordure de bordure rouge 1em puis une bordure orange 1em.

Remarque que la couleur orange a un rayon de 2em (parce que la moitié de celui-ci sera couvert par la couleur rouge)