Combiner des linear-gradients

**stf57** · 24/10/2023, 10h57

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.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**stf57** · 24/10/2023, 11h22

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

**ASCIIDEFOND** · 24/10/2023, 18h01

Salut stf57,

Et avec une image ?

Nom : imgcursor.png
Affichages : 214
Taille : 9,0 Ko

Nom : Screenshot 2023-10-24 at 17-58-08 Document.png
Affichages : 210
Taille : 16,2 Ko

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**stf57** · 25/10/2023, 12h51

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.

**ASCIIDEFOND** · 25/10/2023, 13h03

Une autre solution sans image ?

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**stf57** · 25/10/2023, 14h04

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.

Combiner des linear-gradients

CSS

Vue hybride

Discussions similaires

Partager

Partager