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
6 Replies
-60deg is making it go from bottom right to top left. make it 120deg
oh duh of course thats why the colors are flipped. thank you Mark.
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
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 ... 
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