Modern CSS Clip-path Effects
Cut images and blocks into polygons, circles, stars and waves, and animate between the shapes.
1Triangle Spin
Cuts an element into a triangle and spins it slowly - great for loaders and decorative badges. Class: fx-triangle-spin
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<div class="fx-triangle-spin" style="width:110px;height:110px">
</div>
<img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=800&h=800&q=70" alt="Picture cropped to a triangle" class="fx-triangle-spin object-fit-cover" style="width:120px;height:120px">
</div>
/* CSS (already in assets/css/effects.css) */
.fx-triangle-spin {
-webkit-clip-path: polygon(50% 4%, 96% 88%, 4% 88%); clip-path: polygon(50% 4%, 96% 88%, 4% 88%);
background: linear-gradient(160deg, var(--wt-primary), var(--wt-accent));
animation: fx-triangle-spin-spin 6s linear infinite;
}
@keyframes fx-triangle-spin-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.fx-triangle-spin, .fx-triangle-spin::before, .fx-triangle-spin::after, .fx-triangle-spin *, .fx-triangle-spin *::before, .fx-triangle-spin *::after { animation: none !important; transition: none !important; }
}2Ellipse Morph
An elliptical frame that breathes between wide and tall - soft and organic for portraits. Class: fx-ellipse-morph
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<img src="https://images.unsplash.com/photo-1690378820474-b468b8ee64d3?auto=format&fit=crop&w=800&h=800&q=70" alt="Portrait in a breathing ellipse" class="fx-ellipse-morph object-fit-cover" style="width:170px;height:170px">
</div>
/* CSS (already in assets/css/effects.css) */
.fx-ellipse-morph { -webkit-clip-path: ellipse(46% 34% at 50% 50%); clip-path: ellipse(46% 34% at 50% 50%); animation: fx-ellipse-morph-breathe 5s ease-in-out infinite alternate; }
@keyframes fx-ellipse-morph-breathe {
0% { -webkit-clip-path: ellipse(46% 34% at 50% 50%); clip-path: ellipse(46% 34% at 50% 50%); }
100% { -webkit-clip-path: ellipse(32% 48% at 50% 50%); clip-path: ellipse(32% 48% at 50% 50%); }
}
@media (prefers-reduced-motion: reduce) {
.fx-ellipse-morph, .fx-ellipse-morph::before, .fx-ellipse-morph::after, .fx-ellipse-morph *, .fx-ellipse-morph *::before, .fx-ellipse-morph *::after { animation: none !important; transition: none !important; }
}3Inset Expand
A rounded inner window that expands to the full image edge when hovered. Class: fx-inset-expand
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<img src="https://images.unsplash.com/photo-1742440710136-1976b1cad864?auto=format&fit=crop&w=1200&h=800&q=70" alt="Card image with an expanding frame" class="fx-inset-expand object-fit-cover" style="width:220px;height:150px">
</div>
/* CSS (already in assets/css/effects.css) */
.fx-inset-expand { -webkit-clip-path: inset(12% 12% 12% 12% round 1.5rem); clip-path: inset(12% 12% 12% 12% round 1.5rem); transition: clip-path .6s cubic-bezier(.2, .8, .2, 1); }
.fx-inset-expand:hover, .fx-inset-expand:focus-visible { -webkit-clip-path: inset(0 0 0 0 round 0); clip-path: inset(0 0 0 0 round 0); }
@media (prefers-reduced-motion: reduce) {
.fx-inset-expand, .fx-inset-expand::before, .fx-inset-expand::after, .fx-inset-expand *, .fx-inset-expand *::before, .fx-inset-expand *::after { animation: none !important; transition: none !important; }
}