Combiner des linear-gradients

Version imprimable

24/10/2023, 10h57
stf57

Combiner des linear-gradients
Bonjour,
Pour un formulaire d'évaluation, je dois afficher des radio groups que je n'arrive pas à styliser comme je le souhaite.
J'ai pour le moment 2 versions à base de linear-gradients, et l'idée serait d'arriver à les fusionner, mais je ne trouve pas la bonne syntaxe.
Voici mes 2 formes actuelles.
https://res.cloudinary.com/teka/imag...nts_dhz5nb.jpg

Le version finale serait la forme du bas mais avec les couleurs du haut.
Le CSS de la verison rainbow est
Code:

1 2 3 4 5 6 .rainbow { background:linear-gradient(to right, red, orange, yellow, lime, green); width: 500px; height: 40px; border-radius: 20px; }
Et le CSS de la version en triangle est
Code:

1 2 3 4 5 .triangle { background: linear-gradient(174.3deg, transparent 48%, antiquewhite 50%); width: 500px; height: 50px; }
Une idée de comment je peux remplacer mon antiquewhite par une suite de couleur ?

J'ai aussi essayé de superposer mes 2 DIVs (fond ranbow puis un triangle fait de blanc et transparent), mais je n'arrive pas à les afficher dans le bon ordre en utilisant z-index.

Merci.

Des fois, juste écrire son problème permet de mieux le comprendre soit même, j'ai trouvé un moyen d'afficher mon radio group comme je le veux.
J'utilisais des DIVs imbriquées, alors qu'il fallait les placer l'une après l'autre en jouant sur les positions relatives et absolues.
Le

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="wrapper">
    <div class="triangle-mix">
    </div>
    <div class="rainbow-mix">
    </div>
    <div class="rg top-index">
        <input type="radio" name="test5" id="6a" class="swiper"><label for="6a"><div>0</div></label>
        <input type="radio" name="test5" id="6b" class="swiper"><label for="6b"><div>1</div></label>
        <input type="radio" name="test5" id="6c" class="swiper"><label for="6c"><div>2</div></label>
        <input type="radio" name="test5" id="6d" class="swiper"><label for="6d"><div>3</div></label>
        <input type="radio" name="test5" id="6e" class="swiper"><label for="6e"><div>4</div></label>
    </div>
</div>

Et le CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.wrapper {
    position: relative;
    width: 500px;
    height: 50px;
    margin-top: 50px;
}
.rainbow-mix {
    position: absolute;
    top: 0;
    left: 0;
    background:linear-gradient(to right, red, orange, yellow, lime, green);
    width: inherit;
    height: inherit;
    z-index: 1;
}
.triangle-mix {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(174.3deg, white 48%, transparent 50%);
    width: inherit;
    height: inherit;
    z-index: 2;
}
.top-index {
    position: relative;
    width: inherit;
    height: inherit;
    z-index: 3;
}

Ce qui donne
https://res.cloudinary.com/teka/imag...nal_ytbeqe.jpg

Après, si vous avez d'autres moyens plus propres/efficaces pour obtenir ce résultat, je suis preneur.

2 pièce(s) jointe(s)

Salut stf57,

Et avec une image ?

Pièce jointe 645663

Pièce jointe 645664

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .wrapper {
      position: relative;
      width: 500px;
      height: 50px;
      margin-top: 50px;
    }
 
    .rainbow-mix {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      z-index: 1;
      background: url('./imgcursor.png') no-repeat;
      background-size: contain;
    }
 
    .rg {
      position: absolute;
      width: 100%;
      height: 50px;
    }
 
    .rg label {
      position: relative;
      display: inline-block;
      text-align: center;
      margin: 0 35px 0 35px;
      z-index: 999;
    }
 
    .rg label p {
      width: 20px;
      border: 3px solid transparent;
      height: 50px;
      vertical-align: middle;
      display: table-cell;
    }
 
    .rg input {
      display: none;
    }
 
    label p:hover {
      border: 3px solid red;
      font-size: 2em;
    }
  </style>
</head>
 
<body>
 
  <div class="wrapper">
    <div class="triangle-mix"></div>
    <div class="rainbow-mix"></div>
    <div class="rg top-index">
      <input type="radio" name="test5" id="6a" class="swiper" /><label for="6a">
        <p>0</p>
      </label>
      <input type="radio" name="test5" id="6b" class="swiper" /><label for="6b">
        <p>1</p>
      </label>
      <input type="radio" name="test5" id="6c" class="swiper" /><label for="6c">
        <p>2</p>
      </label>
      <input type="radio" name="test5" id="6d" class="swiper" /><label for="6d">
        <p>3</p>
      </label>
      <input type="radio" name="test5" id="6e" class="swiper" /><label for="6e">
        <p>4</p>
      </label>
    </div>
  </div>
</body>
 
</html>

25/10/2023, 12h51
stf57

Salut ASCIIDEFOND,
Merci pour ta réponse.
J'y avais déjà pensé, mais j'avais plusieurs problèmes de rendu.
Déjà, impossbile pour moi d'avoir un beau rendu comme le tien, je suis nul en dessin (et avec les outils de dessin) et j'ai pas la patience.

Partant de mon cas de test, tu es parti sur une image en 500*50.
Si dans ma page je veux au final changer la taille de mon wrapper, tant que je reste sur un ratio 10*1, ça fonctionne. Mais si je change le ratio (800*50 ou 150*20 que je vais devoir utiliser), l'image ne s'adapte pas.
Pour le linear-gradient, ça s'adpate quel que soit le ratio. Il faut juste remplacer l'angle exprimé en degré par "to bottom right" (problème auquel je n'ai pas encore pensé, découvert ce matin).

Et si je change ma couleur de fond, la transition entre le fond et le rainbow est moins nette en utilisant une image, surtout avec un couleur un peu sombre.

Une autre solution sans image ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        :root {
            --main-BakgroundColor: white;
            --main-BakgroudLineargradient: linear-gradient(to left, red, orange, yellow, lime, green);
            --main-Height: 50px; /* Hauteur du gradient */
            --main-Width: 500px; /* Longueur */
            --main-FontSize: 1.2em; /* Taille police */
            --main-MarginLeft: 35px; /* Déterminer l'espacement des labels avec la console */
        }
 
        .wrapper {
            position: relative;
            display: inline-block;
            height: var(--main-Height);
            width: var(--main-Width);
            background: var(--main-BakgroudLineargradient);
            z-index: 999;
        }
 
 
        .rainbow-mix {
            border-bottom: var(--main-Height) solid transparent;
            border-left: var(--main-Width) solid var(--main-BakgroundColor);
 
        }
 
        .rg {
            position: absolute;
            width: inherit;
            top: 0;
        }
 
        .rg label {
            font-size: var(--main-FontSize);
            text-align: center;
            vertical-align: middle;
            margin: var(--main-MarginLeft);
           
        }
 
        .rg label p {
            position: relative;
            top: 0;
            width: 20px;
            border: 3px solid transparent;
            height: var(--main-Height);
            vertical-align: middle;
            display: table-cell;
        }
 
 
        .rg input {
            display: none;
        }
 
        label p:hover {
            border: 3px solid red;
            font-weight: bold;
        }
    </style>
 
</head>
 
<body>
 
    <div class="wrapper">
        <div class="triangle-mix"></div>
        <div class="rainbow-mix"></div>
 
        <div class="rg top-index">
            <input type="radio" name="test5" id="6a" class="swiper" /><label for="6a">
                <p>0</p>
            </label>
            <input type="radio" name="test5" id="6b" class="swiper" /><label for="6b">
                <p>1</p>
            </label>
            <input type="radio" name="test5" id="6c" class="swiper" /><label for="6c">
                <p>2</p>
            </label>
            <input type="radio" name="test5" id="6d" class="swiper" /><label for="6d">
                <p>3</p>
            </label>
            <input type="radio" name="test5" id="6e" class="swiper" /><label for="6e">
                <p>4</p>
            </label>
        </div>
 
    </div>
 
</body>
 
</html>

25/10/2023, 14h04
stf57

Ca c'est nickel comme forme, le triangle est clairement mieux dessiné, les 2 pointes sont plus nettes et le code est plus simple.
Un grand merci pour ton aide.

Bonjour,

Citation:

...et le code est plus simple.

Quelques remarques quand même.

Les éléments en display:none, ici les <input>, ne sont pas soumis lors de la validation d'un formulaire.
On ne met pas d'élément <p> dans un élément <label> c'est « HTMLlement » incorrect.

La structure est bien complexe, si c'est juste pour mettre un fond on peut avantageusement utiliser un pseudo-élément, lui affecter le linear-gradient et clipper celui-ci en forme de triangle.

Sur base du HTML suivant :

Code:

1
2
3
4
5
6
7
<div class="wrapper-radio">
  <input type="radio" name="rad" id="rad-0" value="0"><label for="rad-0">0</label>
  <input type="radio" name="rad" id="rad-1" value="1"><label for="rad-1">1</label>
  <input type="radio" name="rad" id="rad-2" value="2"><label for="rad-2">2</label>
  <input type="radio" name="rad" id="rad-3" value="3"><label for="rad-3">3</label>
  <input type="radio" name="rad" id="rad-4" value="4"><label for="rad-4">4</label>
</div>

... il suffit d'appliquer le CSS ci-dessous pour obtenir le même résultat :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.wrapper-radio {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-around;
  width: 26em;
  height: 2.5em;
  font-size: 1.2em;
}
.wrapper-radio:before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to right, red, orange, yellow, lime, green);
  clip-path: polygon(0 100%,100% 0,100% 100%,0 100%);
}
.wrapper-radio input {
  position: absolute;
  left: -9999em;
}
.wrapper-radio label {
  min-width: 1.25em;
  border: 3px solid transparent;
  text-align: center;
  line-height: 2.5;
}
.wrapper-radio label:hover {
  border: 3px solid #F00;
  font-weight: bold;
}

30/10/2023, 18h51
stf57

Bonjour NoSmoking,
Pour le Display: none;, c'est ma faute, test case vite fait. Normalement, j'utilise transform: scale(0); pour masquer mes inputs dans un formulaire. C'est acceptable, ou il vaut mieux utiliser ta méthode ?

J'aime bien ton code, même si je n'ai pas bien saisi le :before et le clip-path, faut que je creuse plus la question.
Et dire que je pensais bien connaitre CSS :oops:

Citation:

C'est acceptable, ou il vaut mieux utiliser ta méthode ?

il existe plusieurs façons de masquer un <input> à l'écran, certaines étant à bannir pour problème d'accessibilité, clavier ou lecteur d'écran.

Ci dessous un petit florilège de ce que l'on peut faire (pas forcément exhaustif) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masquer les input</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2157669">
<meta name="category" content="Css">
<meta name="description" content="Différentes façons de masquer des &lt;input&gt; à l'écran.">
<style>
html, body {margin: 0;padding: 0;font: 1em/1.5 Verdana,sans-serif;}
h1, h2, h3 {margin: .25em 0;color: #069;}
time {float: right;margin: .5em;font-size: 0.9em;color: #666;}
main {display: block;margin: auto;max-width: 60em; padding: .25em;}
section {position: relative;margin: 0 1em 1em;}
section > :not(h2) {margin-left: 1em !important;}
code {color: #069;font-size: 1.2em;font-family: monospace;}
</style>
<style id="css-demo">
#demo-radio p {
  margin-top: 0;
  text-indent: .5em;
  line-height: 2;
}
#demo-radio label {
  display: block;
  background-color: #DEF;
  cursor: pointer;
}
#demo-radio [type="radio"]:checked + label {
  font-weight: 700;
  background-color: #EFD;
}
</style>
</head>
<body>
  <main>
    <header>
      <time datetime="2023-10-30">Oct. 2023</time>
      <h1>Différentes façons de masquer des &lt;input&gt; à l'écran.</h1>
    </header>
 
    <div id="demo-radio">
      <code>style="display: none;"</code>
      <p>
        <input name="rad" type="radio" id="rad-1" value="1" style="display: none;">
        <label for="rad-1">Radio #1</label>
      </p>
      <code>hidden="hidden"</code>
      <p>
        <input hidden="hidden" name="rad" type="radio" id="rad-2" value="2">
        <label for="rad-2">Radio #2</label>
      </p>
      <code>style="position: absolute;visibility: hidden;"</code>
      <p>
        <input name="rad" type="radio" id="rad-3" value="3" style="position: absolute;visibility: hidden;">
        <label for="rad-3">Radio #3</label>
      </p>
      <code>style="position: absolute;appearance: none;"</code>
      <p>
        <input name="rad" type="radio" id="rad-4" value="4" style="position: absolute;appearance: none;">
        <label for="rad-4">Radio #4</label>
      </p>
      <code>style="position: absolute;opacity: 0;"</code>
      <p>
        <input name="rad" type="radio" id="rad-5" value="5" style="position: absolute;opacity: 0;">
        <label for="rad-5">Radio #5</label>
      </p>
      <code>style="position: absolute;left: -9999em;"</code>
      <p>
        <input name="rad" type="radio" id="rad-6" value="6" style="position: absolute;left: -9999em;">
        <label for="rad-6">Radio #6</label>
      </p>
      <code>style="position: absolute;clip-path: inset(50%);"</code>
      <p>
        <input name="rad" type="radio" id="rad-7" value="7" style="position: absolute;clip-path: inset(50%);">
        <label for="rad-7">Radio #7</label>
      </p>
      <code>style="position: absolute;scale: 0;"</code>
      <p>
        <input name="rad" type="radio" id="rad-8" value="8" style="position: absolute;scale: 0;">
        <label for="rad-8">Radio #8</label>
      </p>
    </div>
  </main>
</body>
</html>

Les Radio #1 à #3 sont à éviter, la #4 peut poser soucis mais les autres font bien le job.

Nota : La position:absolute permet de sortir l'<input> du flux de la page pour éviter que celui-ci n'interfère avec le reste de la page.

Citation:

Et dire que je pensais bien connaitre CSS :oops:

je te rassure même moi j'ai des lacunes, mais il ne faut pas l'ébruiter ;)

02/11/2023, 10h46
stf57

Merci pour les exemples, y'a pas mal de variantes auquelles je n'aurais jamais pensé.