Create triangular edged div block

Design help General
1

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.

Screen Shot 2020-07-19 at 2.01.16 pm
Screen Shot 2020-07-19 at 2.01.16 pm635×636 238 KB

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!

2

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.

3

Hi Pierre,

I honestly don’t understand how that works haha, but it worked perfectly! Thank you so much for your help!

1 Like