Narzędzie do generowania trójkątów w CSS

Generator Trójkątów CSS to interaktywne narzędzie, które pozwala tworzyć trójkąty w czystym CSS bez użycia obrazów ani SVG. Wykorzystuje trik z obramowaniami CSS do generowania trójkątów w 8 kierunkach (góra, dół, lewo, prawo i cztery przekątne) z możliwością dostosowania rozmiaru i koloru. Wygenerowany kod CSS można bezpośrednio skopiować do projektu.

Wybierz kierunek trójkąta z przycisków kierunku (góra, dół, lewo, prawo lub po przekątnej). Dostosuj szerokość i wysokość za pomocą suwaków, aby kontrolować wymiary trójkąta. Wybierz kolor za pomocą próbnika kolorów. Podgląd aktualizuje się w czasie rzeczywistym, a wygenerowany kod CSS pojawia się na dole. Kliknij przycisk kopiowania, aby skopiować CSS do schowka.

Trójkąty CSS wykorzystują sprytną technikę z obramowaniami. Gdy element ma zerową szerokość i wysokość, jego obramowania spotykają się w punkcie środkowym. Ustawiając niektóre obramowania jako przezroczyste, a inne jako kolorowe, tworzy się wygląd trójkąta. Na przykład trójkąt skierowany w górę używa przezroczystych lewego i prawego obramowania z kolorowym dolnym obramowaniem. Szerokości obramowań określają rozmiar i proporcje trójkąta.

Generator obsługuje 8 kierunków: góra, dół, lewo, prawo, lewy-górny, prawy-górny, lewy-dolny i prawy-dolny. Trójkąty diagonalne używają tylko dwóch obramowań zamiast trzech, tworząc kształt trójkąta prostokątnego. Szerokość kontroluje podstawę trójkąta, a wysokość kontroluje jego wysokość. Aby uzyskać idealny trójkąt równoramienny, ustaw szerokość i wysokość na tę samą wartość.

Trójkąty CSS są powszechnie używane dla strzałek w tooltipach, wskaźników menu rozwijanych, ogonów dymków, separatorów breadcrumbs i elementów dekoracyjnych. Są lekkie, nie wymagają dodatkowych żądań HTTP i doskonale skalują się w każdej rozdzielczości. Połączenie ich z transition i transform CSS pozwala na płynne animacje.