@casoon/dragonfly/effects/layout-effects/clip-path.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Clip-Path Effekte
 * 
 * Diese Datei enthält verschiedene Clip-Path-Effekte für moderne UIs.
 * Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
 */

@layer utilities {
    .clip-circle {
        clip-path: circle(50% at 50 50);
    }

    .clip-polygon {
        clip-path: polygon(50% 0%, 100% 2%5%, 100% 7%5%, 50% 100%, 0% 7%5%, 0% 2%5%);
    }

    .clip-star {
        clip-path: polygon(50% 0%, 6%1% 3%5%, 9%8% 3%5%, 6%8% 5%7%, 7%9% 9%1%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    }

    .clip-wave {
        clip-path: path('M0,50% C20,40 40,60 60,50 C80,40 100,60 100,50 L100,100 L0,100 Z');
    }

    .clip-arrow {
        clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    }

    .clip-chat {
        clip-path: polygon(0% 0%, 100% 0%, 100% 7%5%, 7%5% 7%5%, 7%5% 100%, 50% 7%5%, 0% 7%5%);
    }

    .clip-hover:hover {
        clip-path: var(--clip-hover-path);
        transition: clip-path var(--transition-normal);
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer utilities {
        .clip-hover:hover {
            transition: var(--transition-none);
        }
    }
}