Jak narysować trójkąt w czystym CSS bez SVG?
Klasyczny trick CSS używany od ~2008: `<div>` o zerowych wymiarach (width: 0, height: 0) z kolorowym tylko jednym borderem, a pozostałe transparent, wygląda jak trójkąt. Przeglądarka tnie borderkę po skosie kiedy się stykają, więc kolorowy border bocznego krzyża formuje trójkąt.
To 0 KB, zero zależności, pełen GPU support, idealny dla: strzałek w dropdownach, ogonów w tooltipach, separatorów breadcrumb. Nie trzeba SVG, nie trzeba PNG, nie trzeba ikon.
Tu wybierasz kierunek (8 wariantów: 4 strzałki + 4 narożniki), rozmiar i kolor. Kod CSS gotowy do skopiowania.
Jak korzystać
- Wybierz kierunek klikając jedną z 8 ikon w panelu (góra/dół/lewo/prawo + 4 narożniki).
- Suwak rozmiar (4-200px) kontroluje wielkość trójkąta. Trójkąt jest dwa razy szerszy niż wysoki dla kierunków 4-stronnych.
- Kolor pikerem albo wpisz hex. Wszystkie kolory CSS są OK (#hex, rgb, oklch, named colors).
- Skopiuj CSS i wklej w plik stylów. Klasa `.triangle` aplikujesz na pustym `<div>` lub `<span>`.
- Trick: dla wyższej precyzji zmień width/height na nierówne wartości (np. większy bottom border = wyższy trójkąt).
Do czego się przydaje
Trójkąt CSS-em to wszechobecny element UI. Trzy najczęstsze zastosowania:
- Strzałka w dropdown ("˅" obok pola select). Strzałka pokazująca rozwinięcie listy. Bardzo lekka, GPU-fast, działa wszędzie.
- Ogon tooltipa / dymka wiadomości. Tooltip pojawia się nad elementem, mały trójkąt pokazuje "wskazujemy ten element". Klasyk.
- Separator breadcrumb (Home › Produkty › Kategoria). Zamiast \"\>\"\ albo \"/\" - trójkąt CSS daje subtelnie eleganckie rozdzielenie.
- Strzałka "next/prev" w karuzeli. Trójkąt zamiast ikony SVG = lekka, GPU-fast.
- Wskaźnik kierunku w modalach / popoverach. Trójkąt na krawędzi modal mówi "wskazuje element X".
- Dekoracje narożnikowe (4 diagonalne warianty). Trójkąt w narożniku karty = retro-tech vibe albo "ribbon" badge.
Aby dodać cień pod trójkąt (działa!), użyj `filter: drop-shadow()` (`box-shadow` nie działa, bo prawdziwego boxa nie ma). Dla animacji możesz transformować trójkąt jak każdy element. Dla bardziej skomplikowanych kształtów zobacz clip-path generator.