Diagonal Clip
Two layers that sweep across the card diagonally from the bottom-left corner and leave it split in two tones, each with its own content.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. SVG has 30 effects, including 3 free. Explore the category →
3 usage examples
How it works
Under the .dgc-front face, the .dgc-card stacks two .dgc-layer layers. At rest, the four points of each clip-path: polygon() sit together in the bottom-left corner: nothing shows. On opening, the first layer stretches until it covers the whole card, in 0.6 s with the cubic-bezier(.4,0,.2,1) curve: a slanted sweep starting from the bottom-left corner. The second one, .dgc-layer-2, starts 0.1 s later from the same corner and stops on the lower-right triangle. The card ends up split along its diagonal: first layer top-left, second bottom-right.
Each layer's content follows that split: the first one's is anchored top-left, the second one's bottom-right, with a --dgc-pad margin (1 rem). Two pieces of information fit without overlapping: a title and an action, a time and a link. An image or SVG with the .dgc-media class fills the face or a layer.
Triggers: hover on devices that hover (@media (hover: hover)), keyboard focus on the card or an element inside it, and the .dgc-open class, which the script toggles on each tap on touch screens (a tapped link or button keeps its action). With .dgc-manual on the card, hover, focus and tap are ignored: the sweep only happens when your script sets .dgc-open, which turns it into a transition curtain between two states.
Accessibility
- Keyboard: on Tab the demo card (
tabindex="0") gets covered as on hover, with a#f0abfcoutline. A card that is a link or button needs notabindex. - Screen readers: layers stay in the page and their text is read after the face. When they repeat the face (a doubled contents row) or are only a transition backdrop, put
aria-hidden="true"on each.dgc-layer. - Reduced motion: under
prefers-reduced-motion: reducethe sweep and its delay are removed: both layers appear together, already in place. - Touch: one tap starts the sweep, the next removes it; no more hover state stuck after the finger.
Browser compatibility
Measured in Chromium 151, Firefox 153 and Playwright's WebKit 26.5: 0 errors, two independent copies, sweep on hover, Tab and tap (2nd tap removes it), final state at once with reduced motion, nothing overflowing at 390 px. :focus-visible and :has() set the minimum versions.
Before those versions, hover, tap and the .dgc-open class work in older versions that have the inset property (Chrome 87, Firefox 66, Safari 14.1: the versions that brought the inset property used to stack the faces); keyboard focus no longer triggers the sweep.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0628-root">
<div class="dgc-card" tabindex="0">
<span class="dgc-front">Hover</span>
<div class="dgc-layer">
<span>Layer 1</span>
</div>
<div class="dgc-layer dgc-layer-2">
<span>Layer 2</span>
</div>
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
--dgc-w and --dgc-h |
280px and 180px |
Card size (width capped by the container). |
--dgc-radius |
1rem |
Corner rounding. |
--dgc-front and --dgc-front-color |
#1a1a24 and #fff |
Background and text of the face shown at rest. |
--dgc-layer-1 |
linear-gradient(135deg,#6366f1,#d946ef) |
Background of the first layer, the one that covers the whole card. |
--dgc-layer-2 and --dgc-layer-color |
linear-gradient(135deg,#d946ef,#f43f5e) and #fff |
Background of the lower-right triangle, and text colour of both layers. |
--dgc-pad |
1rem |
Margin of each layer's content in its corner (0 if that content handles its own layout). |
--dgc-speed and --dgc-delay |
.6s and .1s |
Sweep duration and the second layer's delay. |
--dgc-bg and --dgc-min-h |
#0a0a0f and 300px |
Root background and minimum height. |
.dgc-open and .dgc-manual classes |
absent | .dgc-open starts the sweep (tap or script). .dgc-manual turns off hover, focus and tap so only your script drives it. |
FAQ
dgc-manual to the card, then: set dgc-open, wait for the sweep to finish (duration + delay, 700 ms by default), replace the content of .dgc-front, remove dgc-open. The layers withdraw and uncover the new content.--dgc-pad:0, as in the contents example.0 100% (bottom-left corner) becomes, say, 100% 0 to start from the top-right corner, and the second layer's final triangle is then written polygon(0 0, 100% 0, 0 100%, 0 100%).
