Shared gradient background across multiple elements
There are multiple circles representing steps on a progress indicator, placed evenly along a narrow track (the circles are larger than the track is tall). The progress bar must resize horizontally without distorting the circles. All elements must share a single gradient background. I thought there would be something to do with clipping or masking maybe but no examples that I've seen seem applicable to this.
This is what I came up with: https://codepen.io/ptrfrncsmrph-the-vuer/pen/RNrjRGg. Is this how you would do it? Is there a simpler approach that I'm not aware of?
This is what I came up with: https://codepen.io/ptrfrncsmrph-the-vuer/pen/RNrjRGg. Is this how you would do it? Is there a simpler approach that I'm not aware of?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
