Hi all,
I’ve created a triangled edged section in a super hacky way by adding a background image with a triangle on it. It looks poor and doesn’t scale well.
How can I create this in a legit way with CMS/CSS?
I’ve seen multiple people link to this page CSS Triangle | CSS-Tricks - CSS-Tricks - but I’m still confused. Where would I enter this code if I was to use it?
Thanks!
It’s quite easy but needed me a bit of practice though.
For your triangle, I’d simply do :
border-right: 50vw solid transparent ;
border-left: 50vw solid transparent ;
border-bottom: 20vw solid #yourhexcolorcode ;
You just need to recreate those on a div and use the borders panel, no need for code.
The height of your triangle is determined by border-bottom. I know, it’s weird.
Hi Pierre,
I honestly don’t understand how that works haha, but it worked perfectly! Thank you so much for your help!
