Folded corner with CSS

"The idea is to use the clip-path property to create the folded corner effect. This also enables us to animate the effect, since clip-path work seamlessly with CSS transitions. We are going to layer 3 different things: The image with a cropped corner. The white triangle representing the back of the image. A triangular shadow below the white triangle to give some depth."

"The first thing we need is to crop our image so that its corner disappear. In a way, we want to go from having a rectangle to having a 5-sided shape. This is where clip-path: polygon() comes in. We are going to go from a polygonal value that doesn't crop anything, to a value that has 5 points forming our final shape."

"We can use CSS custom properties to avoid authoring the whole clip path twice and to add some meaning behind the values. There really are only 2 values that change: the pinch on the top edge (at 30% of the width), and the pinch on the left edge (at 25% of the height)."

Creating a corner fold hover effect involves layering three elements: a cropped image using clip-path polygon, a white triangle representing the folded back, and a triangular shadow for depth. The clip-path property transitions between two polygon states—one with no cropping and one with pinch points at specific percentages of width and height. CSS custom properties define the fold start positions, allowing smooth animation on hover. The technique leverages clip-path's seamless compatibility with CSS transitions to animate the peeling effect, transforming a rectangle into a five-sided shape that simulates a sticker being peeled from a surface.

Read at kittygiraudel.com