.png)
.png)
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.
