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

MarkBoots•3/31/24, 4:28 AM

-60deg is making it go from bottom right to top left. make it 120deg

MMarkBoots -60deg is making it go from bottom right to top left. make it 120deg

curiousmissfoxOP•3/31/24, 4:45 AM

oh duh of course thats why the colors are flipped. thank you Mark.

MMarkBoots -60deg is making it go from bottom right to top left. make it 120deg

curiousmissfoxOP•3/31/24, 6:08 AM

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•3/31/24, 7:02 AM

yea, there is a strange offset going on. the widths of the stripes are

pink 16px
purple 10px
but the first pink is only 14.5.
you could do the repeating gradient with a , but then the last stripe will be 1.5px short. for that you'll need a second gradient

MarkBoots•3/31/24, 7:05 AM

or you just type out the full gradient.

MarkBoots•3/31/24, 7:13 AM

MMarkBoots yea, there is a strange offset going on. the widths of the stripes are - pink 1...

curiousmissfoxOP•3/31/24, 5:22 PM

so im not crazy!!! thank you so much it was driving me up a wall

curiousmissfoxOP•3/31/24, 5:54 PM

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

curiousmissfoxOP•3/31/24, 5:58 PM

actually no that clip-path thing isnt working like i thought it should