What we'll be creating:
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/6507602b5a77315f45b99043_Corner%20fold%20-%201.jpg)
Figma tutorial
1) Add a fixed size square to the 'paper' element
I'm assuming your containing element has auto-layout already applied.
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/6507603b198bf80c49dd44d0_Corner%20fold%20-%202.jpg)
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).
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/65076087198bf80c49ddc00d_Corner%20fold%20-%203.jpg)
3) Add another, equal size square
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/6507608efab2eb6618800d5b_Corner%20fold%20-%204.jpg)
4) Edit the square and turn it into a triangle
Simply drag the corner vector point. Doesn't have to be exact.
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/6507609572f7d6df562f3939_Corner%20fold%20-%205.jpg)
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/6507609b816b62037bbab879_Corner%20fold%20-%206.jpg)
5) Position the triangle on top of the first square
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/650760a92127502df4d1370e_Corner%20fold%20-%207.jpg)
6) Edit and round corners as needed
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/650760afdb4558d6c957491a_Corner%20fold%20-%208.jpg)
Done!
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/6507602b5a77315f45b99043_Corner%20fold%20-%201.jpg)
Webflow tutorial
What we'll be creating:
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/650766dc90c9c28a8d4b8640_WF%20corner%20fold%201.png)
1) Give the containing 'paper' element a Position of Relative
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/650766ea90c9c28a8d4b8fe5_WF%20corner%20fold%202.png)
2) Add a div (it'll be the corner fold)
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/65076724ae129c296155ef4e_WF%20corner%20fold%203.png)
3) Make sure it has no width or height + Give it some color and a thick border
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/65076757e573adb1bac65298_WF%20corner%20fold%204.png)
4) Change its position to Absolute
Move it to the top left corner.
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/6507675f50dc7cb7d936daa5_WF%20corner%20fold%205.png)
5) Change the border color of the top and left borders so they are the same color as the background
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/650767643c743783adb98eb8_WF%20corner%20fold%206.png)
Why does this work?
Div borders meet each other at an angle..
When the div has no height or width, the borders become triangles.
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/6507676aae129c296155f926_WF%20corner%20fold%207.png)