Generator trójkąta CSS

Czym jest to narzędzie?

CSS nie ma dedykowanego kształtu trójkąta, więc trójkąty buduje się dobrze znanym obejściem: bierzesz element o zerowej szerokości i wysokości, nadajesz mu pełne obramowanie z jednej strony, a przezroczyste obramowania z dwóch sąsiednich stron. Ponieważ sąsiadujące obramowania spotykają się pod kątem 45 stopni, przezroczyste obramowania zwężają się do punktu, pozostawiając widoczne tylko kolorowe obramowanie w kształcie trójkąta.

To narzędzie buduje tę strukturę za Ciebie: wybierz, w którą stronę ma wskazywać trójkąt, jak duży ma być i jakiego koloru, a następnie obserwuj aktualizujący się podgląd na żywo i skopiuj dokładny kod CSS. To ta sama sztuczka wykorzystywana w całej sieci do strzałek wyłącznie w CSS, wskaźników dymków podpowiedzi i strzałek rozwijanych menu.

Źródło: CSS Backgrounds and Borders Module Level 3, W3C — definiuje, jak sąsiadujące krawędzie obramowania spotykają się pod kątem, co jest mechanizmem, na którym opiera się ta technika trójkąta.

Dlaczego warto go używać?

• Podgląd na żywo renderuje rzeczywisty trójkąt, dzięki czemu możesz potwierdzić rozmiar, kierunek i kolor przed skopiowaniem czegokolwiek.
• Obejmuje wszystkie cztery podstawowe kierunki — góra, dół, lewo, prawo — za pomocą jednego elementu sterującego.
• Nie potrzeba plików graficznych ani SVG — tak zbudowany trójkąt to tylko kilka linii CSS.
• Przydatne do wskaźników dymków podpowiedzi, strzałek menu rozwijanych/akordeonów, niestandardowych punktorów listy i prostych kształtów dekoracyjnych.
• Działa całkowicie w przeglądarce — żadne wprowadzone przez Ciebie ustawienia nie są nigdzie przesyłane.
• Bezpłatne, bez rejestracji, działa na urządzeniach mobilnych.

Jak używać

1. Wybierz kierunek — trójkąt wskazuje górę, dół, lewo lub prawo w zależności od tego, która strona otrzymuje pełne obramowanie.
2. Ustaw rozmiar — kontroluje on wartość border-width na wszystkich trzech stronach i określa, jak duży wydaje się trójkąt.
3. Wybierz kolor widocznego (pełnego) obramowania, który staje się kolorem wypełnienia trójkąta.
4. Skopiuj wygenerowany kod CSS i zastosuj go do elementu z width: 0 i height: 0 — dobrze sprawdzi się zarówno pusty <div>, jak i pseudoelement typu ::before/::after.

Przykład

Wejście

Kierunek: dół · Rozmiar: 60px · Kolor: #ea580c

Wynik

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

Dla trójkąta wskazującego w dół, pełny kolor umieszcza się na border-top, podczas gdy lewe i prawe obramowanie pozostają przezroczyste — strona przeciwna do kierunku, w który wskazuje trójkąt.

Dlaczego zerowa szerokość i wysokość mają znaczenie

Sztuczka działa tylko dlatego, że element nie ma własnego pola treści — width: 0 i height: 0 oznaczają, że cały widoczny kształt powstaje wyłącznie z obramowań spotykających się w punkcie centralnym. Jeśli element ma jakąkolwiek szerokość lub wysokość, obramowania przestają zwężać się do wyraźnego punktu i kształt się rozpada. To także powód, dla którego technika ta działa równie dobrze na pustym <div>, jak i na pseudoelemencie ::before/::after z content: "" — nie jest potrzebna rzeczywista treść, tylko pole obramowania.

Dokumentacja MDN dotycząca właściwości CSS border opisuje, jak łączą się border-width, border-style i border-color, w tym jak obramowania sąsiednich stron spotykają się po przekątnej (developer.mozilla.org/en-US/docs/Web/CSS/border) — fakt geometryczny, na którym opiera się cała ta technika.

Typowe zastosowania trójkątów CSS

• Wskaźniki dymków podpowiedzi i chmurek dialogowych: mały trójkąt (6–10px) umieszczony na krawędzi zaokrąglonego pola, w kolorze dopasowanym do tła pola.
• Strzałki menu rozwijanych i list select: mały trójkąt skierowany w dół obok przycisku lub elementu select, wskazujący, że otwiera menu.
• Wskaźniki akordeonu/rozwijania: trójkąt skierowany w prawo, który obraca się w dół po rozwinięciu sekcji.
• Niestandardowe punktory listy: mały trójkąt skierowany w prawo zamiast domyślnego punktora przeglądarki, dla bardziej wyróżniającego się stylu listy.
• Proste narożniki banerów/wstążek: trójkąt wsunięty w róg karty, symulujący efekt złożonej wstążki.

Łączenie z innymi narzędziami CSS

Wygenerowany trójkąt jako wskaźnik dymka podpowiedzi zwykle wymaga pasującego cienia, aby wizualnie pasował do pola, do którego jest przyczepiony — Generator cieni ramki tworzy taki cień. W przypadku kształtów interfejsu wykraczających poza trójkąty (szewrony, gwiazdy, sześciokąty) clip-path jest zazwyczaj lepszym, nowoczesnym podejściem niż nakładanie kolejnych sztuczek z obramowaniem.

→ Generator cieni ramki · Generator promienia krawędzi

Najczęściej zadawane pytania