Generator trójkątów CSS: kod z border i clip-path | We.Inc
Wybierz jeden z ośmiu kierunków, ustaw szerokość, wysokość i kolor, a następnie skopiuj trójkąt CSS zrobiony z obramowań lub z clip-path, wraz z wersją Tailwind i przykładem strzałki tooltipa.
Generator trójkątów CSS
Są dwa czyste sposoby na narysowanie trójkąta w CSS. Klasyczna sztuczka nadaje pudełku o zerowym rozmiarze grube obramowania i sprawia, że wszystkie poza jednym są przezroczyste. Nowoczesny sposób nadaje zwykłemu pudełku rozmiar i tło, a następnie przycina je przez clip-path: polygon() z trzema punktami. Ten generator tworzy oba warianty dla ośmiu kierunków.
Metoda border czy clip-path?
Potrzeba
Metoda border
Pełna, jednokolorowa strzałka
Działa wszędzie
Działa we wszystkich aktualnych przeglądarkach
Wypełnienie gradientem lub obrazem
Nie, każde obramowanie ma jeden kolor
Tak, przycina dowolne tło
Tylko kontur
Nałóż na siebie dwa trójkąty
Nie bezpośrednio; clip-path ucina też obramowania i cienie
Rozmiar ustawiany przez width i height
Nie, rozmiar wynika z grubości obramowań
Tak
Strzałka tooltipa na ::before lub ::after
Typowy wybór
Też w porządku
Strzałki w tooltipach, dymkach, rozwijanych menu i narożnikach wstążek to prawie zawsze małe trójkąty CSS. Wybierz kierunek, przeciągnij suwak rozmiaru, a podgląd pokaże obie techniki obok siebie, abyś przed skopiowaniem tej pasującej do Twojego komponentu zobaczył, że wyglądają tak samo.
Wybierz kierunek: w górę, w dół, w lewo, w prawo lub jeden z czterech trójkątów narożnych.
Ustaw szerokość, wysokość i kolor. Przycisk trójkąta równobocznego ustawia wysokość na szerokość razy 0.866.
Porównaj oba podglądy, a następnie skopiuj wersję z border, wersję z clip-path lub klasy Tailwind.
W metodzie border grubość obramowania po kolorowej stronie staje się wysokością trójkąta, a dwie przezroczyste strony zajmują po połowie podstawy.
Używaj clip-path, gdy trójkąt potrzebuje gradientu, obrazu lub zmiany koloru po najechaniu na pudełku o określonym rozmiarze.
W strzałkach tooltipów pozycjonuj trójkąt przez position: absolute na pseudoelemencie, aby nie dodawać zbędnego kodu HTML.
Potrzebujesz więcej niż trzech punktów? Generator clip-path pozwala przeciągać każdy narożnik wielokąta.
Najczęściej zadawane pytania
Jak działa sztuczka z trójkątem z obramowań?
Tam, gdzie spotykają się dwa obramowania, przeglądarka rysuje narożnik po przekątnej. Przy width i height równych 0 pudełko to tylko cztery kliny obramowań stykające się w środku. Pokoloruj jeden klin, a sąsiednie ustaw jako przezroczyste, i zobaczysz pojedynczy trójkąt.
Jak zrobić trójkąt równoboczny?
Wysokość trójkąta równobocznego to jego podstawa razy pierwiastek z 3 podzielony przez 2, czyli około 0.866. Dla podstawy 100 pikseli użyj wysokości około 87 pikseli.
Czy trójkąt CSS może mieć obramowanie lub kontur?
Sam w sobie nie. Typowe podejście to nałożenie dwóch trójkątów: nieco większego w kolorze konturu z tyłu i trójkąta w kolorze wypełnienia na wierzchu, przesuniętego o grubość konturu. Gdy potrzebujesz ostrego konturu, prostsze jest SVG inline ze stroke.
Czy clip-path zmienia pudełko elementu w układzie?
Nie. Element zachowuje w układzie pełny prostokątny rozmiar; clip-path zmienia tylko to, co jest malowane. Treść poza wielokątem, w tym cienie i obramowania, zostaje ucięta.
Jak zapisać trójkąt clip-path w Tailwind?
Użyj dowolnej właściwości z podkreśleniami zamiast spacji, na przykład [clip-path:polygon(50%_0,100%_100%,0_100%)], razem z klasami rozmiaru i koloru, takimi jak w-[40px] h-[30px] bg-[#4F98FB].
Wybierz metodę zależnie od przeznaczenia trójkąta
Dla małej strzałki wystającej z tooltipa lub menu metoda border to nadal najkrótszy kod, który wygodnie mieści się w pseudoelemencie. Ma jeden kolor, a jej rozmiar wynika z grubości obramowań, i to wszystko, czego strzałka potrzebuje.
Dla kształtu dekoracyjnego, narożnika w sekcji hero lub czegokolwiek z gradientem łatwiej myśleć w kategoriach clip-path: ustawiasz width i height jak dla każdego pudełka i opisujesz trzy narożniki w procentach.
Trójkąty narożne
Trójkąty narożne są prostokątne i wypełniają połowę prostokąta. Przy obramowaniach kolorujesz jedną stronę, jedną sąsiednią ustawiasz jako przezroczystą, a pozostałe dwie zostawiasz na zero. Przydają się do zagiętych rogów kartki i końcówek wstążek.
Strzałka tooltipa z pseudoelementem
Dymek ze strzałką w dół
Element ::after nie ma rozmiaru. Jego górne obramowanie to strzałka, a boczne obramowania są przezroczyste.
Trójkąt z gradientem przez clip-path
Trójkąt z obramowań nie przyjmie gradientu. Przycięte pudełko tak, bo clip-path ucina dowolne tło, które pudełko maluje.
Kreator trójkątów
Wybierz kierunek, ustaw rozmiar i kolor i porównaj trójkąt z obramowań z trójkątem clip-path przed skopiowaniem.