At my workplace, sometimes I’m tasked with creating impractical UIs such as this ribbon shown in the screenshot below. I see them as impractical since it is not your average card UIs or navigation bars that are easy to create. These types of problem requires a bit of thinking but with a systematic approach, you can get a glimpse of a possible solution easily.
When I received the mockup from my designers, I have 2 choices: use the ribbon as image (the easy way) or use CSS (the hard way). I love a good challenge and so I chose CSS and I will take a clever solution with CSS any day provided that it gives you a clean solution with good browser support. So how did I approach this problem? What’s the trick to solving problems with CSS?