Generator kształtów CSS - clip-path i wielokąty
Wybierz figurę, ustaw rozmiar i kolor, a następnie dopasuj punkty wielokąta lub promienie.
Przejdź do narzędziaWybierz figurę, ustaw rozmiar i kolor, a następnie dopasuj punkty wielokąta lub promienie. Podgląd korzysta z wygenerowanego CSS.
Spis treści
Wynik i eksport
Uzupełnij dane.
Jak działa narzędzie
Wybierz wielokąt, koło lub elipsę. Dla wielokąta użyj gotowej figury albo wpisz punkty X Y, po jednym w wierszu. Ustal wymiary i kolor. Pobierz CSS lub pełny przykład HTML.
Szczegóły techniczne
Właściwość clip-path wyznacza widoczną część prostokątnego elementu. Polygon używa kolejnych wierzchołków w procentach szerokości i wysokości. Circle oraz ellipse korzystają z promienia i położenia środka. Procentowy promień circle jest liczony względem znormalizowanej przekątnej pola odniesienia; w ellipse osie odnoszą się do szerokości i wysokości.
FAQ
Czy mogę zmienić każdy punkt?
Tak. Wpisz parę X Y w procentach w osobnym wierszu. Możesz dodawać i usuwać punkty w podanym limicie.
Czy wynik jest plikiem SVG?
Nie. Wynik używa elementu HTML oraz CSS clip-path.
Dlaczego figura jest przycięta?
Clip-path ukrywa obszar poza obrysem. Większą figurę w podglądzie można przewinąć; eksport zachowuje zadane wymiary.
Ograniczenia narzędzia
Obsługiwane są polygon, circle i ellipse. Wielokąt ma 3–32 punkty, współrzędne 0–100%. Kolejność punktów określa obrys; przecinające się krawędzie mogą tworzyć nietypowe wnętrze. Rozmiar: 40–1200 px na wymiar. Figura jest dekoracyjna i ma aria-hidden. Narzędzie eksportuje CSS, nie SVG ani obraz rastrowy. Zmiana wymiarów wpływa na proporcje wielokąta.
Źródła i aktualizacja
- MDN — clip-path — sprawdzono 18.09.2026.
- MDN — circle — sprawdzono 18.09.2026.