Softonic

Generator trójkątów CSS

Krok 1 / 2
Dalej

Klasyczny trójkąt CSS wcale nie jest trójkątem, to element o zerowej szerokości i zerowej wysokości z trzema przezroczystymi obramowaniami i jednym kolorowym, które spotykają się w jednym punkcie. Ten generator tworzy taką deklarację w czterech kierunkach (w górę, w dół, w lewo, w prawo), o rozmiarze w pikselach, który wybierzesz, i wypełnioną wybranym kolorem. Świetnie nadaje się do strzałek dymków podpowiedzi, dymków wypowiedzi oraz separatorów okruszków (breadcrumb).

Jak zbudować trójkąt z obramowań

  1. 1

    Wybierz kierunek

    W górę, w dół, w lewo lub w prawo. Kierunek decyduje, które obramowanie otrzyma kolor, a które trzy pozostaną przezroczyste.

  2. 2

    Ustaw rozmiar

    Wartość rozmiaru jest stosowana do wszystkich szerokości obramowań. Trójkąt o rozmiarze 60 px będzie miał szerokość 120 px (lub wysokość, w zależności od kierunku).

  3. 3

    Wybierz kolor wypełnienia

    Pole koloru obsługuje wyłącznie wartości hex (np. `#10b981`); kolory rgb, rgba lub nazwane nie są obsługiwane. Kolor jest stosowany wyłącznie do obramowania po przeciwnej stronie.

  4. 4

    Skopiuj regułę CSS

    Wynik to kompletny zestaw reguł `.triangle { ... }`, wklej go do swojego arkusza stylów i dodaj `<div class="triangle"></div>` tam, gdzie to potrzebne.

Dlaczego sztuczka z obramowaniem działa

Gdy element ma width: 0 i height: 0, jego cztery obramowania spotykają się w jednym punkcie centralnym. Ponieważ obramowania łączą się pod kątem 45 stopni, każde z nich jest już trójkątem, trzy z nich są po prostu niewidoczne. Nadaj jednemu obramowaniu kolor, a zobaczysz ten jeden trójkąt.

Mapa kierunków

Kierunek Widoczne obramowanie Przezroczyste obramowania
W górę border-bottom border-left, border-right, border-top
W dół border-top border-left, border-right, border-bottom
W lewo border-right border-top, border-bottom, border-left
W prawo border-left border-top, border-bottom, border-right

Obliczanie rozmiaru

Wszystkie trzy przezroczyste obramowania mają tę samą wartość rozmiaru. Widoczne obramowanie używa tego samego rozmiaru. Zatem trójkąt z size: 60:

  • Szerokość = 2 × 60 = 120 px dla trójkątów w górę/w dół
  • Wysokość = 2 × 60 = 120 px dla trójkątów w lewo/w prawo

Jeśli potrzebujesz trójkąta asymetrycznego (węższa podstawa, wyższy wierzchołek), nadaj przezroczystym obramowaniom jeden rozmiar, a widocznemu obramowaniu inny, na przykład border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red; daje wysoki, wąski trójkąt skierowany w górę.

Kiedy zamiast tego sięgnąć po SVG

  • Potrzebujesz wielu wierzchołków, a nie trzech, użyj <polygon>.
  • Trójkąt musi płynnie skalować się wraz z elementem nadrzędnym, użyj viewBox i preserveAspectRatio.
  • Chcesz wypełnienie gradientem, obrys lub zaokrąglony wierzchołek, obramowania CSS nie potrafią żadnej z tych rzeczy.

Najczęściej zadawane pytania

Nie za pomocą samych obramowań, szerokości obramowań nie przyjmują % ani vw w żaden dobrze obsługiwany sposób. Jeśli potrzebujesz płynnego skalowania, przejdź na SVG <polygon> lub użyj clip-path: polygon(...) na zwykłym elemencie.

Nie da się zaokrąglić rogu, w którym stykają się obramowania. Użyj SVG z obrysowaną ścieżką (path) i stroke-linejoin: round albo clip-path: polygon(...) w połączeniu z delikatnym filter: drop-shadow, aby zamaskować krawędź.

Tak, to najczęstszy przypadek użycia. Ustaw trójkąt pozycjonowaniem absolutnym przy krawędzi dymka i dopasuj kolor wypełnienia do tła dymka, aby całość wyglądała jak jeden dymek.

Tak. Wybrany kierunek, rozmiar i kolor są wysyłane do naszego serwera wraz z żądaniem strony, aby mógł on zbudować CSS. W trybie krokowym wartości te trafiają również do linku strony. Nie są przechowywane.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Ściągawka do Markdown

Praktyczna ściągawka Markdown z prawdziwym podglądem i przykładami gotowymi do skopiowania: nagłówki, listy, tabele, kod, linki, obrazy i składnia GFM.

Symulator licznika rozkazów

Śledź uproszczony listing instrukcji o stałej długości z etykietami, skokami, wywołaniami, powrotami i adresami 16-, 24- lub 32-bitowymi.

Konwerter ASCII na binarny

Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.

Narzędzie jest dostępne w innych językach