<hr class="instagram">

J'essaie d'utiliser le dégradé linéaire avec la balise <hr> pour colorer la ligne. Est-ce une action valable? Sinon, comment puis-je y parvenir?

.instagram {
  color: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)); /* Not Working */
  border-width: medium;
  border-style: solid;
  margin-block-start: 0px;
  margin-block-end: 0px;
  border-radius: 10px;
  border-radius: 10px 10px 0px 0px;
}
0
Zef 5 avril 2020 à 20:29

3 réponses

Je vois que vous n'avez pas de hauteur sur votre heure - et peut-être changer la couleur en arrière-plan. J'ai également ajouté la prise en charge de différents navigateurs. Essaye ça:

.instagram {
  height: 1px;
  border-radius: 10px 10px 0px 0px;
background: hsl(37, 97%, 70%); /* not all browsers support gradients */ 
  background: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)) /* standard syntax */ 
  background: -webkit-linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)); /*For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)); /* For Opera 11.1 to 12.0 */ 
  background: -moz-linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)); /* For Firefox 3.6 to 15 */ 
}
0
Sylwia Vargas 5 avril 2020 à 17:37

Une autre façon de le faire:

.instagram {
  background: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)) border-box;
  border: medium solid transparent;
  border-radius: 10px 10px 0px 0px;
  margin: 0;
}
<hr class="instagram">
0
Kosh 5 avril 2020 à 17:55

Au lieu de bordure, utilisez height et background-image pour le gradient linéaire.

.instagram {
  background-image: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%));
  border-radius: 10px 10px 0px 0px;
  height: 5px;
}
<hr class="instagram">
1
Azametzin 5 avril 2020 à 17:32