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.