Генератор CSS clip-path: нестандартні форми елементів

Що таке CSS clip-path?

Властивість clip-path обрізає елемент за визначеною формою, приховуючи все, що виходить за її межі. На відміну від border-radius, clip-path може створювати складні форми: зірки, стрілки, скошені кути, хвилі. Обрізання відбувається на рівні rendering, не впливаючи на потік документа.

Типи форм clip-path

polygon() — довільний многокутник через список координат точок. circle() та ellipse() — круглі форми. inset() — прямокутник із заокругленнями. path() — довільний SVG-шлях (підтримується не всюди). Координати можна задавати в px або % від розміру елемента.

Анімація clip-path

Переходи між clip-path однакового типу підтримуються: polygon з однаковою кількістю точок. Наприклад, квадрат може анімовано перетворюватися у ромб або стрілку. transition: clip-path 0.3s ease дає плавний ефект «розкриття» або «закриття» форми.

Практичне застосування

Діагональні секції сторінки замість горизонтальних розділів. Шестикутні галереї зображень. Анімовані переходи між сторінками. Нестандартна форма кнопок. Ефект «виглядання» зображення з-за рамки. Пам'ятайте, що overflow зі скошеними формами не обрізає box-shadow — потрібно використовувати filter: drop-shadow замість box-shadow.