Generator CSS trójkątów i strzałek
Zmień kierunek, rozmiar i kolor na CSS regułę, która narysuje trójkąt lub strzałkę bez obrazu.
Generator CSS trójkątów i strzałek
Wybierz kierunek, szerokość i wysokość, a to narzędzie napisze regułę CSS, która narysuje kształt - trójkąt skierowany w górę, w dół, w lewo lub w prawo, lub trójkąt narożny dla znaczka z wstęgą. Nie ma potrzeby eksportowania pliku obrazu ani dodatkowego znacznika: kształt to czysty CSS, więc idealnie skaluje się na dowolny rozmiar i pozostaje ostry na wyświetlaczach o wysokiej gęstości. To element budulcowy dla strzałek rozwijanych, wskaźników akordeonów, znaczków wstęgowych i małego wskaźnika na etykiety lub bąbelu czatu.
Są obsługiwane dwie techniki. Border trick ustawia przeciwne krawędzie pola o zerowej wielkości na transparentne i koloruje resztę - klasyczny przepis o najszerszym wsparciu przeglądarek. clip-path zamiast tego rysuje kształt na polu o określonym rozmiarze za pomocą wielokąta, co jest łatwiejsze do odczytania w dev tools i animowania. Przełączaj między nimi za pomocą opcji techniki.
Włącz Użyj jako pseudo-element ::after dla reguły ograniczonej do ::after, absolutnie pozycjonowanej tuż obok wybranego kierunku lub rogu, gotowej do przyłożenia do elementu, który już ma pozycjonowanie względne - dokładnie to, czego potrzebuje strzałka rozwijana lub wskaźnik, bez dodatkowego HTML. Zamiast tego włącz Bąbel dialogowy ze strzałką i narzędzie wygeneruje dwie reguły razem: obramowany, zaokrąglony bąbel z komentarzem i strzałkę przyłączoną do jego krawędzi, wskazującą wybrany kierunek - kształt za bąbelem czatu lub popoverą pomocy.
Wszystko działa w Twojej przeglądarce: nic, co skonfiguratorujesz, nigdy nigdzie się nie przesyła. Skopiuj wygenerowany CSS, pobierz go jako plik .txt lub wyślij do wejścia innego narzędzia - na przykład generatora border-radius lub clip-path - aby kontynuować udoskonalanie kształtu.