Créer une diagonale dans un bloc avec Linear-gradient

Comment créer une diagonale dans un bloc

Voici une manière vraiment rapide de créer un bloc à deux couleurs, un bloc coupé par une diagonale avec la propriété linear-gradient.

See the Pen linear gradient by yuyazz (@yuyazz) on CodePen.

Voici les explications du site MDN :
« Représente la position du point de départ de la ligne du dégradé. Elle consiste en deux mots-clés : le premier indique le côté horizontal : left ou right ; le second indique le côté vertical : top ou bottom. Les valeurs to top, to bottom, to left et to right correspondent respectivement aux angles 0deg, 180deg, 270deg, 90deg. Le point d’arrivé est défini comme le symétrique du point de départ par rapport au centre de la boîte. »
On peut donc ruser et utiliser linear gradient plutôt que « clip path » pour attribuer de façon simple deux couleurs à un bloc en le « coupant » en deux. On précise un pourcentage de 50%/50% après la couleur, pour établir une séparation nette entre les deux faces du bloc.Sans ces indications, la séparation entre les couleurs se ferait en dégradé

See the Pen
linear gradient withouth color-stop
by yuyazz (@yuyazz)
on CodePen.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.