Discussion :

[Mric1982]

Bonsoir à tous,

J'ai codé en css un sunburst dont voici le code:

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
31
32
33
34
35
36
37
html,body {
width: 100%;
height: 550px;
margin: 0;
}
#grad {
position: relative;
width: 100%;
height: 100%;
}
#grad:after, #grad:before {
content: '';
position: absolute;
background: linear-gradient(90deg, transparent 50%, #2cc26b 50%, #2cc26b), 
linear-gradient(82deg, transparent 50%, #2ecc71 50%, #2ecc71), 
linear-gradient(67deg, transparent 50%, #2cc26b 50%, #2cc26b), 
linear-gradient(52deg, transparent 50%, #2ecc71 50%, #2ecc71), 
linear-gradient(37deg, transparent 50%, #2cc26b 50%, #2cc26b), 
linear-gradient(22deg, transparent 50%, #2ecc71 50%, #2ecc71), 
linear-gradient(07deg, transparent 50%, #2cc26b 50%, #2cc26b), 
linear-gradient(-8deg, transparent 50%, #2ecc71 50%, #2ecc71), 
linear-gradient(-23deg, transparent 50%, #2cc26b 50%, #2cc26b), 
linear-gradient(-38deg, transparent 50%, #2ecc71 50%, #2ecc71), 
linear-gradient(-53deg, transparent 50%, #2cc26b 50%, #2cc26b), 
linear-gradient(-68deg, transparent 50%, #2ecc71 50%, #2ecc71), 
linear-gradient(-83deg, transparent 50%, #2cc26b 50%, #2cc26b), 
linear-gradient(-90deg, transparent 50%, #2ecc71 50%, #2ecc71);
background-position:0% 0%;
background-size: 200% 100%;
height: 100%;
width: 50%;
}
 
#grad:before {
left: 50%;
transform: rotate(180deg);
}

Le div grad est dans le html et j'aimerais n'afficher que la partie supérieure de ce sunburst je ne pense pas que cela soit difficile mais je bloque dessus si quelqu'un a une idée ou sait comment faire je suis preneur.
Merci.

[NoSmoking]

Bonjour et bienvenue sur DVP.
quelques remarques :
- Pourquoi démarrer à 90° pour finir à -90° si tu ne veux pas la partie inférieure?
- Il te faut démarrer à 180° et finir à 0°, de la sorte tu n'as pas besoin d'avoir un :after et un :before retourné
- Avantage tu pourras même écrire dessus.