DARMOWE NARZĘDZIE

Generator CSS Triangle

Generuj trójkąty CSS za pomocą sztuczki border. Wybierz kierunek, rozmiar i kolor. Kopiuj gotowy CSS. Bezpłatnie online. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Direction

Unit

Szerokość

Wysokość

Kolor

Include html Opcja narzędzia

Note

Wynik

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator trójkątów CSS online

Trójkąty CSS to jeden z najbardziej znanych tricków front-endowych: element o zerowej szerokości/wysokości z odpowiednim border tworzy dowolny trójkąt bez grafik.

CSS triangle trójkąt CSS border trick CSS shapes

Jak to działa

Element div z width:0; height:0 i np. border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid #f00 tworzy trójkąt skierowany w górę.

Kierunki i rodzaje

Góra, dół, lewo, prawo, ukośne (górno-lewy, górno-prawy itd.). Generator oferuje też trójkąty równoboczne i równoramienne.

Najczęstsze pytania

Czy mogę użyć trójkąta jako tooltipa?

Tak — generator oferuje preset: div + pseudo-element ::after tworzący trójkąt-wskazówkę pod dymkiem.

Alternatywa dla starszego border-trick?

clip-path: polygon() to nowocześniejsze podejście; generator obsługuje oba.

Czy działa w IE?

Border-trick działa od IE6; clip-path od IE Edge 79+.

Inne kształty CSS twórz przez clip-path maker i generator CSS shapes.