I'd go with pseudo element triangles myself (I'd prefer not to use transforms if I can, less to process), but that's just an alternative approach to the same problem. What I love about CSS, and what this post encourages, is that there are usually multiple possible solutions, and the opportunities for creative problem solving are constant.

My first thought was “why not gradients?”. And I made a demo with
two linear gradients on one element — https://codepen.io/paulradz...

I thought of linear gradients after I'm done with the ribbons and didn't really explore it. Looking at your demo, I notice that there is a black border on the bottom of the darker blue ribbon on Safari (mobile). On Chrome, the edges are jagged too which can be smooth out. Thanks for the demo!

There's definitely more than one approach to a problem and I think linear-gradients is the most elegant one for being one element only.

> 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).

How about inline SVG with preserveAspectRatio="none" the easy yet semantic way?

I recommend checking out SuperTeamDeluxe (its a shop but the frontend svg game is always on point)
https://superteamdeluxe.com/

Using SVG is always an option. But what I want to demonstrate in this article is the power of CSS and how to solve problems with it.

I recommend checking out my work with SVG, a visual itinerary of my trip around the North Island of New Zealand: https://codepen.io/rrenula/...

Awesome, thanks a lot for sharing, yeah CSS is pretty good as well, most of the time is roughly the same effort to get it done with CSS or SVG but most codepens showcase CSS.

I just commented that out because of the having 2 choices sentence like there weren't any other choices.

Also that svg codepen you did is pretty badass i was blown away. Thanks for sharing!

No problem. Yep, I had assume that when I mentioned image as one of the choices, the readers would include SVG under the definition of image as well. SVG is an image but it is just a different format that is manipulatable by code.

Image with source svg yeah but inline svg is a different tag altogether. i think that's where the confusion came?

on that sentence at least on my understanding is heavily implied you meant a png

I feel like there's a nicer way to give criticism.

I'm sorry if that came out as rude, not my intentions, english is not my native language.

For what it's worth, I think your comment was totally fine. I didn't see anything critical or not nice about it.