Service Ribbons in CSS

April 27, 2020 9:42 AM

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