Corner Peel Hover Reveal Card — CSS clip-path Page-Curl Effect

This effect simulates a folded paper corner lifting away from a card to reveal something hidden beneath it — a classic print and skeuomorphic-UI motif — using nothing but a layered clip-path and a small gradient triangle, animated on hover with no JavaScript at all.

Two stacked layers, one clipped with a notch

.peel-under is a plain full-size panel sitting behind everything, showing the "reveal" content (a discount code, in this demo). .peel-front sits on top of it at the same size, but its clip-path is a seven-point polygon that traces the card's full rectangle *except* for a small square notch cut out of the top-left corner — 0 0, 100% 0, 100% 100%, 0 100%, 0 30px, 30px 30px, 30px 0. That notch is what lets a small triangle of the layer underneath show through even at rest.

Why the notch size, not a transform, is what animates

On :hover, the polygon's notch coordinates change from 30px/30px to 108px/108px, and because clip-path is transitioned with a cubic-bezier easing, the browser smoothly interpolates every point of the polygon between those two states — the missing corner visibly grows from a small triangle into a large one, exposing more of .peel-under as it does. This is a fundamentally different technique from a folding rotate3d transform (which would need a separately shaped, separately positioned corner piece with 3D perspective); here, the "peeling front layer" is really just one shape whose cut corner is getting bigger.

The corner fold decoration is a separate, matching element

.peel-corner is a small absolutely-positioned square in the exact top-left corner, styled with a diagonal two-color linear gradient (transparent 48%, #fde68a 50%, #f59e0b 100%) to fake the look of a folded paper triangle with a shaded underside, plus a subtle drop shadow. Its own width/height are animated on the same hover trigger and with the same transition timing as the front layer's clip-path notch, so the folded-corner graphic visually grows in lockstep with the clipped notch it's supposed to be sitting inside — two separately-styled elements kept in sync purely by sharing the same CSS trigger and duration.

Where this earns its place over a plain reveal-on-hover panel

A simple opacity or translate reveal communicates "something appears," but a corner-peel specifically communicates "there's something *underneath* this card," which reads well for surfacing secondary information a designer wants to feel discoverable rather than immediately obvious — a hidden discount code, a secondary stat, or an easter-egg detail on a promotional card.