How do I approach this design ?
How do I approach this design and make it responsive ? What I am finding complex is the triangle. My initial thought was to just import it as png from figma and paste it in but as it contains some data so I thought it should be coded in html css
5 Replies
I'm bad with this stuff so might not be the best approach but I think you could do it like this:
Make each triangle section background an svg.
Make a box with a fixed height for each section, and then add the svg as a background image.
Then just add text in the box and style it to match design
clip-path for the triangle.
https://codepen.io/CodeNascher/pen/jOQWPZj?editors=1100
Nice use of
aspect-ratio, I've only used it for images never thought about using it for something like this 👍was the first thing i thought of, lol. could be polished a little more, but i made that in 5 mins or so 😛
Woah cool, you just coded the whole solution. thank you so much !!!
@vince Thanks for your suggestion as well.