Czym jest clip-path i kiedy go używać?
clip-path to właściwość CSS, która wycina element do zadanego kształtu. Wpisujesz `clip-path: polygon(50% 0, 100% 100%, 0 100%)` i zwykły div staje się trójkątem. Wszystko poza zdefiniowanym kształtem znika.
Tu masz gotowe presety (trójkąt, sześciokąt, ośmiokąt, gwiazda, strzałka, dymek wiadomości, błyskawica) plus interaktywny edytor. Kliknij w obszar żeby dodać punkt, przeciągnij punkt żeby zmienić pozycję, podwójny klik żeby usunąć. Dla okręgu / elipsy są osobne presety z dwoma uchwytami.
Wynik to gotowa linia CSS `clip-path: ...` którą wklejasz w swój styl.
Jak korzystać
- Wybierz preset z prawej kolumny (trójkąt, gwiazda, strzałka, dymek). Każdy ma kilka wierzchołków, gotowy do wykorzystania.
- Przeciągnij dowolny biały punkt żeby zmienić jego pozycję. Pozycje są w procentach (0-100%) więc kształt skaluje się z elementem.
- Kliknij w pustą część obszaru żeby dodać nowy wierzchołek (tylko w trybie poligonu). Skill dla zaawansowanych kształtów.
- Podwójny klik na punkt usuwa go. Minimum 3 punkty (trójkąt).
- Skopiuj wynikowy CSS i wklej w styl elementu HTML.
Do czego się przydaje
Clip-path to standard nowoczesnego web designu od 2018 (wspierany wszędzie). Zamiast tworzyć obrazek dla każdego nietypowego kształtu, robisz to w pełni CSS-em:
- Diagonal section divider (linia przecinająca sekcję pod kątem). Klasyczny element w portfoliach i SaaS landing page'ach.
- Hero z fotką wyciętą do nietypowego kształtu. Sześciokąt zamiast prostokąta = mocny visual hook.
- Awatary w kształcie sześciokąta (Discord, Slack mają coś podobnego).
- Karta promocyjna w kształcie metki (lightning bolt, arrow). Bardziej eye-catchy niż prostokąt.
- Dymek wiadomości (chat bubble) bez konieczności rysowania ogona przez ::after.
- Animacja "reveal": `transition: clip-path 0.5s`, mała wartość → duża wartość = efekt "wycinania" treści.
- Karta z odciętym rogiem (corner cut) - klasyk w sci-fi UI.
Aby dodać cień pod nietypowy kształt, użyj `filter: drop-shadow()` (box-shadow nie podąża za clip-path). Dla bardziej miękkich, organicznych form użyj generatora border-radius.