Repeating-Linear-Gradient

Why is my gradient starting with the dark colour when i declare the pink colour first? For context I am trying to match the reference on the right side of the screen. https://codepen.io/Miss-Fox/pen/ZEZXgWd
No description
6 Replies
MarkBoots
MarkBoots8mo ago
-60deg is making it go from bottom right to top left. make it 120deg
clevermissfox
clevermissfox8mo ago
oh duh of course thats why the colors are flipped. thank you Mark.
clevermissfox
clevermissfox8mo ago
I can’t seem to find the exact values, I keep getting close but it looks like it rotates a tad or something it’s driving me crazy. Have you completed this css battle by any chance? https://cssbattle.dev/play/187
Target #187 (Striped Triangle) - CSSBattle
The funnest CSS game for web designers & developers
MarkBoots
MarkBoots8mo ago
yea, there is a strange offset going on. the widths of the stripes are - pink 16px (0 16px) - purple 10px (16px 26px) but the first pink is only 14.5. you could do the repeating gradient with a background-position: -1.5px, but then the last stripe will be 1.5px short. for that you'll need a second gradient or you just type out the full gradient. 14.5 | 24.5 | 40.5 | 50.5 | 66.5 ...
MarkBoots
MarkBoots8mo ago
No description
clevermissfox
clevermissfox8mo ago
so im not crazy!!! thank you so much it was driving me up a wall i did type out the whole thing but then i realized i might have brought my clip path in 1.5px instead at the starting point. idk how you figured out those values, but youre a saint. thank you actually no that clip-path thing isnt working like i thought it should
Want results from more Discord servers?
Add your server