CSS trijstūra ģenerators

Kas ir šis rīks?

CSS nav īpašas trijstūra formas, tāpēc trijstūri tiek veidoti ar labi zināmu apeju: paņem elementu ar nulles platumu un nulles augstumu, piešķir tam vienu blīvu apmali vienā pusē un caurspīdīgas apmales divām blakusesošajām pusēm. Tā kā blakusesošās apmales satiekas 45 grādu leņķī, caurspīdīgās apmales sašaurinās punktā, atstājot redzamu tikai krāsoto apmali kā trijstūri.

Šis rīks veido šo struktūru tavā vietā: izvēlies, kurā virzienā trijstūrim jārāda, cik lielam tam jābūt un kāda krāsa tam jābūt, tad vēro, kā tiešraides priekšskatījums atjaunojas, un kopē precīzu CSS. Tā pati pamattehnika tiek izmantota visā internetā tīra CSS bultām, padoma logu norādēm un nolaižamās izvēlnes marķieriem.

Avots: CSS Backgrounds and Borders Module Level 3, W3C — definē, kā blakusesošās apmales malas satiekas leņķī, kas ir mehānisms, uz kura balstās šī trijstūra tehnika.

Kāpēc to izmantot?

• Tiešraides priekšskatījums renderē faktisko trijstūri, lai vari apstiprināt izmēru, virzienu un krāsu pirms kopēšanas.
• Aptver visus četrus pamata virzienus — augšup, lejup, pa kreisi, pa labi — ar vienu vadīklu.
• Nav vajadzīgi attēlu faili vai SVG — šādi veidots trijstūris ir tikai dažas CSS rindas.
• Noder padoma logu norādēm, nolaižamā/akordeona marķieriem, pielāgotiem sarakstu punktiem un vienkāršām dekoratīvām formām.
• Darbojas pilnībā tavā pārlūkā — nekas, ko konfigurē, netiek nekur augšupielādēts.
• Bezmaksas, bez reģistrācijas, strādā mobilajās ierīcēs.

Kā to lietot

1. Izvēlies virzienu — trijstūris rāda augšup, lejup, pa kreisi vai pa labi atkarībā no tā, kurai pusei ir blīva apmale.
2. Iestati izmēru — tas kontrolē border-width vērtību visās trīs pusēs un nosaka, cik liels trijstūris izskatās.
3. Izvēlies krāsu redzamajai (blīvajai) apmalei, kas kļūst par trijstūra pildījuma krāsu.
4. Kopē ģenerēto CSS un pielieto to elementam ar width: 0 un height: 0 — tukšs <div> vai pseido-elements, piemēram, ::before/::after, abi der labi.

Piemērs

Ievade

Virziens: lejup · Izmērs: 60px · Krāsa: #ea580c

Izvade

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

Uz leju rādošam trijstūrim krāsa tiek uzlikta uz border-top, kamēr kreisā un labā apmale paliek caurspīdīga — pretējā puse no virziena, uz kuru rāda trijstūris.

Kāpēc svarīgs nulles platums un augstums

Triks darbojas tikai tāpēc, ka elementam nav sava satura lauka — width: 0 un height: 0 nozīmē, ka visa redzamā forma nāk tikai no apmalēm, kas satiekas centra punktā. Ja elementam ir jebkāds platums vai augstums, apmales vairs nesašaurinās tīrā punktā un forma sabojājas. Tāpēc tehnika vienlīdz labi darbojas gan uz tukša <div>, gan uz ::before/::after pseido-elementa ar content: "" — faktisks saturs nav vajadzīgs, tikai apmales lauks.

MDN dokumentācija par CSS border īpašību apraksta, kā border-width, border-style un border-color kombinējas, tostarp to, kā apmales blakusesošajās pusēs satiekas diagonāli (developer.mozilla.org/en-US/docs/Web/CSS/border) — ģeometriskais fakts, uz kura balstās visa šī tehnika.

Izplatīti CSS trijstūru lietojumi

• Padoma logu un runas burbuļu norādes: mazs trijstūris (6–10px), novietots pie noapaļotas kastes malas, krāsots atbilstoši kastes fonam.
• Nolaižamo izvēlņu un select marķieri: mazs uz leju rādošs trijstūris blakus pogai vai select elementam, lai norādītu, ka tas atver izvēlni.
• Akordeona/izvēršanas indikatori: pa labi rādošs trijstūris, kas rotē uz leju rādošu, kad sadaļa ir izvērsta.
• Pielāgoti saraksta punkti: mazs pa labi rādošs trijstūris parastā pārlūka punkta vietā, izteiksmīgākam saraksta stilam.
• Vienkārši baneru/lentu stūri: trijstūris, kas iekļauts kartes stūrī, lai imitētu salocītas lentes efektu.

Kombinēšana ar citiem CSS rīkiem

Trijstūri, ko izmanto kā padoma loga norādes, parasti vajag atbilstošu krītošu ēnu, lai vizuāli saskanētu ar kasti, kurai tie pievienoti — Box Shadow ģenerators rada šo ēnu. UI formām, kas pārsniedz trijstūrus (ķīļi, zvaigznes, sešstūri), clip-path parasti ir labāka moderna pieeja, nevis apmales triku sakraušana.

→ Box Shadow ģenerators · Border Radius ģenerators

Biežāk uzdotie jautājumi