I wanted to share this cool CSS trick I learned that gives the appearance of a page corner folding. This effect can increase visual interest by adding depth to the page, and it can also complement themes related to books, writing, or even vintage styles.

The basic idea is to use absolute positioning to place a square in the upper right corner of the page element.

Then, we cut away half the square from the diagonal while cutting the same amount from the page element.

To do this, we need to know two things: the width/height of the square and the diagonal length.

Since we want the diagonal to cut the square in half, we can use some simple math to find that the width should be 1.4 times the diagonal length. For example, let's say we choose our diagonal to be 20 pixels. That means the width would be 28 pixels.

Now, let's set the CSS properties:

• We'll create the cutout effect using a linear gradient with an abrupt transition from transparent to the page color.
• A default gradient moves from left to right, but we want it to move from the top right corner down and to the left. That's why we rotate the gradient 225 degrees.
• Set the width/height of the class that we'll apply to the square.

Don't forget to add some drop shadow to give it a feeling of depth! And there you have it - a cool page corner fold effect using CSS!

📊 In my project, I made variables for the square width and cutout diagonal so that I could adjust them from my component after the user hovers over the corner. [Project Source]

I hope you find this trick helpful and can use it to spice up your designs! Let me know if you have any questions. Happy coding! 😊