Combinaison de dégradés

Hello,

J'aimerais faire une combinaison de deux dégradés, mais je ne trouve pas le bon moyen de le faire. Il y a évidement la solution image, mais bon. On a de tellement chouette possibilité aujourd'hui que ce serait dommage.

Voici 2 options en CSS que j'ai essayé, les 2 ont le même rendu, mais un comportement différent (comme attendu). Cela dit, les 2 ont chacunes un point faible.

Solution 1 codepen:

body{
  background: 
    linear-gradient(
      150deg, 
      rgba(255, 255, 255, 1) calc(50vw + 100px), 
      rgba(255, 255, 255, 0) calc(50vw + 101px)
    ),
    linear-gradient(
      20deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(248, 249, 250, 1) 100%
    );
  background-position: top 50% right;
  background-attachment: scroll, local;
}

Problème: ne scroll pas… (pas de background-attachment dispo dessus)

Solution 2 codepen:

body::before{
  content: "";
  position: absolute;
  top: 100px; right:0; left: 0;
  transform-origin: top right;
  height: 500px;
  background: linear-gradient(190deg, rgba(248,249,250,1) 0%, rgba(255,255,255,0) 50%);
  transform: skew(0deg, -30deg);
}

Problème: Génère du contenu et un scroll sur la page


Objectif:
- dégradé gris léger ver blanc 15deg top-right vers bottom-left
- mask blanc -30deg
? idélament, le point de sortie doit pouvoir être défini par rapport à top-right de la fenetre

Est-ce que vous voyez une moyen
- d'avoir cette combinaison,
- qui suit le scroll
- qui ne génère pas d'overflow si pas d'autre contenu

Merci

Salut Yordi,

Je ne vois pas vraiment ce que tu veux faire. Cependant, ce que j'ai saisi et ma solution serait de prendre ta 2e proposition et faire ces modifs:

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente corporis recusandae omnis deserunt excepturi, reiciendis accusamus odit voluptatum atque, odio nostrum praesentium dolores laboriosam incidunt distinctio saepe maxime culpa nisi! etc. etc. </div>

body::before{
  content: "";
  position: fixed;
  z-index: -1;
  top: 100px; right:0; left: 0;
  transform-origin: top right;
  height: 500px;
  background: linear-gradient(190deg, rgba(128,128,128,1) 0%, rgba(255,255,255,0) 50%);
  transform: skew(0deg, -30deg);
}

div{
  height: 2000px;
}

**j'ai volontairement foncé ton dégradé. Pourquoi ? Je ne vois rien à l'écran

Le problème principale de cette solution est que lorsque le contenu s'allonge (avec ton div qui fait 2000px par exemple), le scroll apparait, mais le background ne scroll pas avec la page.

Salut,

Pas le temps de tester quoi que ce soit, je pars au travail...

Juste une idée : tu as tenté un background-size ? Avec une hauteur de 200vh par exemple ? (Pour la première solution).

Bonjour @yordi.

je ne sais pas vraiment ce que tu souhaites, si c'est avoir le triangle à peine visible en bas de page, un :before sur body peut-être utile pour bricolé ce gradient .

je verrai deux options pour ce pseudo élement:
* un seul gradient a 30deg + un clip-path
* un seul gradient a 30deg + un mask avec un second gradient à 150deg ou (bottom right en forçant le ratio de la boite ) ex: https://codepen.io/gc-nomade/pen/LYrePbe

la difficulté avec les angles et endroit de départ/arrivée sur les cotés droit et bas, c'est que, soit on garde les 100px et l'inclinaison change en fonction du ratio de la fenêtre, soit on garde l'inclinaison et on perd au moins la distance d'un bord. Bon ça c'est pour ce que j'ai pu comprendre de ton soucis, je suis peut-être à coté.

Cdt