How to add a corner fold in Figma & Webflow

What we'll be creating:

Figma tutorial

1) Add a fixed size square to the 'paper' element

I'm assuming your containing element has auto-layout already applied.

‍

2) Apply 'Position: Absolute' to the square

The square will no longer take up space in the layout. It can be moved freely.

Move the square to the corner.

Important: Change the square's color so that it equals that of the background (the element behind the 'paper' element).

3) Add another, equal size square

4) Edit the square and turn it into a triangle

Simply drag the corner vector point. Doesn't have to be exact.

5) Position the triangle on top of the first square

6) Edit and round corners as needed

Done!

Webflow tutorial

What we'll be creating:

1) Give the containing 'paper' element a Position of Relative

2) Add a div (it'll be the corner fold)

3) Make sure it has no width or height + Give it some color and a thick border

‍

4) Change its position to Absolute

Move it to the top left corner.

5) Change the border color of the top and left borders so they are the same color as the background

‍

Why does this work?

Div borders meet each other at an angle..

When the div has no height or width, the borders become triangles.