Streaming live at 10am (PST)

Create triangular edged div block

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 https://css-tricks.com/snippets/css/css-triangle/ - but I’m still confused. Where would I enter this code if I was to use it?

Thanks!


Hi @Sheridan_Hessing,

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.

image

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!

1 Like