Service Ribbons in CSS
April 27, 2020 9:42 AM   Subscribe

Service Ribbons in CSS
Service ribbons commemorate a soldier's participation in war, campaign or battle starting with the establishment of the state of Israel in 1948. Ribbons are made of cloth and steel. This project is about creating them with HTML & CSS.
Role: Developer
posted by lipsum (1 comment total)

Nice, I like the way you build up the bands with divs and borders.

Another way to do it would be with linear gradients:
background: linear-gradient(to right, red 25%, orange 25% 35%, yellow 35% 65%, orange 65% 75%, red 75%);
With the advantage that it adds fewer divs to the document's DOM and disadvantage that you don't get symmetry for free and have to specify each color twice.
posted by AndrewStephens at 10:41 AM on April 27, 2020

« Older TV Opening Sequences Quiz...   |   Nick Cave and the Bad Seeds - ... Newer »

You are not currently logged in. Log in or create a new account to post comments.