Generator CSS trikotnikov

Izberi smer, velikost in barvo, da zgradiš trikotnik iz navadnega CSS-a, nato kopiraj kodo. To uporablja klasično tehniko diva z ničelno širino/višino in prosojnimi obrobami — brez slikovnih datotek, brez SVG, brez clip-path — le nekaj deklaracij obrobe, ki jih razume vsak brskalnik.

Kaj je to orodje?

CSS nima namenske oblike trikotnika, zato so trikotniki zgrajeni z dobro znano rešitvijo: vzemi element z ničelno širino in ničelno višino, mu daj polno obrobo na eni strani in prosojni obrobi na dveh sosednjih straneh. Ker se sosednje obrobe stikajo pod kotom 45 stopinj, se prosojni obrobi zožita v točko in ostane vidna le obarvana obroba kot trikotnik.

To orodje zgradi to strukturo zate: izberi smer, v katero naj trikotnik kaže, kako velik naj bo in kakšne barve naj bo, nato poglej, kako se živi predogled posodobi, in kopiraj natančen CSS. Isti osnovni trik se uporablja po celem spletu za čisto CSS puščice, kazalce namigov in kotičke spustnih menijev.

Vir: CSS Backgrounds and Borders Module Level 3, W3C — opredeljuje, kako se sosednji robovi obrobe stikajo pod kotom, kar je mehanizem, na katerem temelji ta tehnika trikotnika.

Zakaj ga uporabiti?

Živi predogled izriše dejanski trikotnik, tako da lahko potrdiš velikost, smer in barvo, preden karkoli kopiraš.
Pokriva vse štiri osnovne smeri — gor, dol, levo, desno — z eno kontrolo.
Ni potrebnih slikovnih datotek ali SVG — trikotnik, zgrajen na ta način, je le nekaj vrstic CSS-a.
Uporaben za kazalce namigov, kotičke spustnih menijev/harmonike, oznake po meri in preproste dekorativne oblike.
Deluje v celoti v tvojem brskalniku — nič od tega, kar konfiguriraš, se ne naloži nikamor.
Brezplačno, brez prijave, deluje na mobilnih napravah.

Kako ga uporabljati

Izberi smer — trikotnik kaže gor, dol, levo ali desno, odvisno od tega, katera stran dobi polno obrobo.
Nastavi velikost — to nadzoruje vrednost border-width na vseh treh straneh in določa, kako velik se trikotnik izriše.
Izberi barvo za vidno (polno) obrobo, ki postane barva polnjenja trikotnika.
Kopiraj ustvarjeni CSS in ga uporabi na elementu z width: 0 in height: 0 — prazen <div> ali psevdo-element, kot je ::before/::after, oba delujeta dobro.

Primer

Vnos

Smer: dol · Velikost: 60px · Barva: #ea580c

Rezultat

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

Za navzdol usmerjen trikotnik gre polna barva na border-top, medtem ko levo in desna obroba ostaneta prosojni — nasprotna stran od smeri, v katero trikotnik kaže.

Zakaj je ničelna širina in višina pomembna

Trik deluje samo zato, ker element nima lastnega vsebinskega polja — width: 0 in height: 0 pomenita, da celotna vidna oblika izhaja izključno iz obrob, ki se stikajo v središčni točki. Če ima element kakršno koli širino ali višino, se obrobe ne zožijo več v čisto točko in oblika se pokvari. Zato tehnika enako dobro deluje tako na praznem <div> kot na psevdo-elementu ::before/::after s content: "" — ni potrebna dejanska vsebina, samo polje obrobe.

MDN-jeva dokumentacija lastnosti CSS border pokriva, kako se border-width, border-style in border-color kombinirajo, vključno s tem, kako se obrobe na sosednjih straneh stikajo diagonalno (developer.mozilla.org/en-US/docs/Web/CSS/border) — geometrijsko dejstvo, na katerem temelji cela ta tehnika.

Pogoste uporabe CSS trikotnikov

Kazalci namigov in oblačkov za govor: majhen trikotnik (6–10px), postavljen na robu zaobljenega polja, obarvan tako, da se ujema z ozadjem polja.
Kotički spustnih menijev in polj za izbiro: majhen navzdol usmerjen trikotnik ob gumbu ali izbirnem elementu, ki nakazuje, da odpre meni.
Indikatorji razširitve harmonike: desno usmerjen trikotnik, ki se zavrti navzdol, ko je razdelek razširjen.
Oznake seznamov po meri: majhen desno usmerjen trikotnik namesto privzete brskalniške oznake, za bolj razpoznaven slog seznama.
Preprosti kotički pasic/trakov: trikotnik, potisnjen v kot kartice, ki simulira učinek zavihanega traku.

Kombiniranje z drugimi CSS orodji

Trikotniki, uporabljeni kot kazalci namigov, običajno potrebujejo ujemajočo senco, da vizualno sedejo s poljem, na katerega so pripeti — Generator sence okvirja ustvari to senco. Za oblike uporabniškega vmesnika, ki presegajo trikotnike (kljunčke, zvezde, šesterokotnike), je clip-path na splošno boljši sodoben pristop kot kopičenje več trikov z obrobo.

→ Generator box-shadow · Generator border-radius

Pogosta vprašanja

Zakaj gre barva na nasprotno obrobo od smeri, v katero trikotnik kaže?

Predstavljaj si element kot romb, sestavljen iz štirih trikotnih segmentov obrobe, ki se stikajo na sredini. Če je polna barva na zgornji obrobi, vidna oblika zaseda zgornjo polovico — a ker ima element ničelno velikost, ta 'zgornja polovica' trikotnika dejansko kaže navzdol, proti mestu, kjer bi bilo neobstoječe vsebinsko polje elementa. Enaka logika velja za vse štiri smeri.

Ali lahko ustvarim trikotnik, ki ni popolna enakokraka oblika?

Da — to orodje vedno ustvari simetričen trikotnik zaradi enostavnosti, a lahko kopiran CSS naknadno ročno urediš. Če narediš dve prosojni širini obrobe neenaki, se trikotnik nagne na eno stran; sprememba širine polne obrobe neodvisno spremeni njegovo višino brez vpliva na širino osnove.

Ali ta tehnika deluje v vseh brskalnikih?

Da — trik trikotnika na osnovi obrobe se zanaša samo na osnovno podporo za border-width, border-style in border-color, ki obstaja od najzgodnejših implementacij CSS-a. To je ena najbolj široko združljivih tehnik čistih CSS oblik, ki so na voljo.

Kdaj naj uporabim clip-path namesto trika z obrobo?

Trik z obrobo je idealen posebej za preproste trikotnike, ker ne potrebuje dodatnih lastnosti in deluje povsod. Za kar koli bolj zapletenega — petkotnike, zvezde, puščice z zarezo ali diagonalne reze na polju, ki mora še vedno prikazovati sliko ozadja — je clip-path bolj prilagodljiv in lažje razumljiv, čeprav ima ožjo podporo starejših brskalnikov.

Ali lahko v trikotnik postavim besedilo ali ikono?

Ne neposredno — ker ima element trikotnika ničelno širino in višino, ni vsebinskega polja, ki bi karkoli vsebovalo. Za kombinacijo trikotnika z besedilom ali ikono ga uporabi kot dekorativni psevdo-element (::before/::after) na starševskem elementu, ki ga absolutno pozicionira, nato pa ločeno oblikuj dejansko vsebino starša.