How would I convert these 3 div into 1 div without using border, and only background?

I just added the extra colours into the linear gradient syntax. Linear gradients are indeed a little complex but with trial and error you can soon tweak things into position when you have an example to work from

to right = from left to right horizontally

#0ff 83px = first 83px is #0ff

'#0059dd` 83px = now abruptly change to #0059dd

#0059dd 86px = continue same color for 3 pixels

#fff 86px = abruptly change to #fff

#fff 174px = continue same color up to 174px with #fff

#0059dd 174px = abruptly change to #0059dd

#0059dd 177px = continue for 3 pixels

#f0f 177px = abruptly change to #f0f for the rest from 177px onwards.

7 Likes