CSS Triangle generaator

Vali suund, suurus ja värv, et ehitada kolmnurk pelgalt CSS-ist, ja kopeeri seejärel kood. See kasutab klassikalist nulllaiuse/nullkõrgusega divi ja läbipaistvate ääristega tehnikat — pole faile, SVG-d ega clip-path'i — vaid mõned äärise deklaratsioonid, millest iga brauser aru saab.

Mis see tööriist on?

CSS-il pole spetsiaalset kolmnurgakuju, seega ehitatakse kolmnurki tuntud lahendusega: võta element, mille laius ja kõrgus on null, anna sellele ühele küljele täisäär ja teistele kahele külgnevale küljele läbipaistev äär. Kuna külgnevad äärised kohtuvad 45-kraadise nurga all, kitsenevad läbipaistvad äärised punkti, jättes nähtavaks ainult värvilise äärise kolmnurgana.

See tööriist ehitab selle struktuuri sinu eest: vali, mis suunas kolmnurk peaks osutama, kui suur see peaks olema, ja mis värvi see peaks olema, seejärel vaata elava eelvaate uuenemist ja kopeeri täpne CSS. Sama aluseks olev trikk, mida kasutatakse üle veebi puhtast CSS-ist arvide, tööriistavihjete osutite ja rippmenüü noolte jaoks.

Allikas: CSS Backgrounds and Borders Module Level 3, W3C — defineerib, kuidas külgnevad äärised kohtuvad nurga all, mis on selle kolmnurgatehnika aluseks olev mehhanism.

Miks seda kasutada?

Elav eelvaade renderdab tegeliku kolmnurga, nii et saad kinnitada suuruse, suuna ja värvi enne millegi kopeerimist.
Katab kõik neli põhisuunda — üles, alla, vasakule, paremale — ühe juhtelemendiga.
Pilte ega SVG-d pole vaja — sel viisil ehitatud kolmnurk on vaid mõni rida CSS-i.
Kasulik tööriistavihjete osutite, rippmenüü/akordioni noolte, kohandatud loendipunktide ja lihtsate dekoratiivsete kujundite jaoks.
Töötab täielikult sinu brauseris — midagi, mida sa seadistad, ei laadita kuhugi üles.
Tasuta, registreerimist pole vaja, töötab ka mobiilis.

Kuidas kasutada

Vali suund — kolmnurk osutab üles, alla, vasakule või paremale, olenevalt sellest, millisele küljele täisäär läheb.
Määra suurus — see kontrollib border-width väärtust kõigil kolmel küljel ja määrab, kui suur kolmnurk paistab.
Vali värv nähtava (täis) äärise jaoks, millest saab kolmnurga täitevärv.
Kopeeri loodud CSS ja rakenda see elemendile, millel on width: 0 ja height: 0 — tühi <div> või pseudoelement nagu ::before/::after töötavad mõlemad hästi.

Näide

Sisend

Suund: alla · Suurus: 60px · Värv: #ea580c

Tulemus

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

Allapoole osutava kolmnurga jaoks läheb täisvärv border-top peale, samal ajal kui vasak ja parem äär jäävad läbipaistvaks — vastaskülg suunast, kuhu kolmnurk osutab.

Miks nulllaius ja -kõrgus on oluline

Trikk töötab ainult seetõttu, et elemendil pole oma sisukasti — width: 0 ja height: 0 tähendavad, et kogu nähtav kuju tuleb puhtalt keskpunktis kohtuvatest ääristest. Kui elemendil on mistahes laius või kõrgus, ei kitsene äärised enam puhtaks punktiks ja kuju laguneb. Seepärast töötab tehnika ka võrdselt hästi tühjal <div>-il või ::before/::after pseudoelemendil content: "" atribuudiga — tegelikku sisu pole vaja, ainult äärise kast.

MDN dokumentatsioon CSS border omaduse kohta käsitleb, kuidas border-width, border-style ja border-color kombineeruvad, sealhulgas kuidas külgnevate külgede äärised kohtuvad diagonaalselt (developer.mozilla.org/en-US/docs/Web/CSS/border) — geomeetriline fakt, millel kogu see tehnika põhineb.

Levinud kasutusalad CSS kolmnurkadele

Tööriistavihje ja kõnemulli osutid: väike kolmnurk (6–10px) ümardatud kasti servas, värvitud kasti taustaga sobivalt.
Rippmenüü ja select-nooled: väike allapoole osutav kolmnurk nupu või select-elemendi kõrval, mis näitab, et see avab menüü.
Akordioni/laienemise indikaatorid: paremale osutav kolmnurk, mis pöördub alla osutama, kui sektsioon on avatud.
Kohandatud loendipunktid: väike paremale osutav kolmnurk vaikimisi brauseripunkti asemel eristuvama loendi stiili jaoks.
Lihtsad bänneri/lindi nurgad: kolmnurk, mis on peidetud kaardi nurka, et simuleerida murtud lindi efekti.

Kombineerimine teiste CSS tööriistadega

Kolmnurgad, mida kasutatakse tööriistavihje osutitena, vajavad tavaliselt sobivat langevat varju, et sulanduda visuaalselt kastiga, millega need on ühendatud — Box Shadow generaator loob selle varju. UI kujundite jaoks, mis lähevad kaugemale kolmnurkadest (nooltäpid, tähed, kuusnurgad), on clip-path üldiselt parem kaasaegne lähenemine rohkemate äärisetrikkide virnastamise asemel.

→ Box Shadow Generaator · Border Radius Generaator

Korduma kippuvad küsimused

Miks läheb värv vastaskülje äärisele suunast, kuhu kolmnurk osutab?

Kujuta ette elementi teemandina, mis koosneb neljast kolmnurksest äärisesegmendist, mis kohtuvad keskel. Kui täisvärv on ülemisel äärisel, hõivab nähtav kuju ülemise poole — kuid kuna elemendil pole suurust, osutab see 'ülemine pool' kolmnurk tegelikult allapoole, sinna, kus oleks olnud elemendi olematu sisukast. Sama loogika kehtib kõigi nelja suuna kohta.

Kas saan teha kolmnurga, mis pole täiuslik võrdhaarne kuju?

Jah — see tööriist genereerib alati lihtsuse mõttes sümmeetrilise kolmnurga, kuid saad kopeeritud CSS-i hiljem käsitsi muuta. Kahe läbipaistva äärise laiuse ebavõrdseks tegemine kaldu kolmnurga ühele poole; täisäärise laiuse iseseisev muutmine muudab selle kõrgust, mõjutamata baasi laiust.

Kas see tehnika töötab kõigis brauserites?

Jah — äärisel põhinev kolmnurgatrikk sõltub ainult baastasemel border-width, border-style ja border-color toest, mis on eksisteerinud varaseimatest CSS teostustest saati. See on üks kõige laiemalt ühilduvamaid puhta CSS kujunditehnikaid.

Millal peaksin kasutama clip-path'i äärisetriki asemel?

Äärisetrikk on ideaalne spetsiifiliselt lihtsate kolmnurkade jaoks, kuna see ei vaja lisaomadusi ja töötab kõikjal. Kõige keerulisema jaoks — viisnurgad, tähed, sälguga nooled või diagonaallõiked kastil, mis peab siiski taustapilti näitama — on clip-path paindlikum ja lihtsam mõista, kuigi sellel on kitsam vana brauseritugi.

Kas saan panna teksti või ikooni kolmnurga sisse?

Mitte otseselt — kuna kolmnurga elemendil on null laius ja kõrgus, pole sisukasti, kuhu midagi hoida. Kolmnurga tekstiga või ikooniga kombineerimiseks kasuta seda dekoratiivse pseudoelemendina (::before/::after) vanemelemendil, mis positsioneerib selle absoluutselt, ja stiliseeri vanema tegelik sisu eraldi.