CSS trikampio generatorius

Pasirinkite kryptį, dydį ir spalvą, kad sukurtumėte trikampį iš paprasto CSS, tada nukopijuokite kodą. Naudojamas klasikinis nulinio pločio/aukščio div su permatomais kraštais triukas — jokių vaizdo failų, jokio SVG, jokio clip-path — tik saujelė border deklaracijų, kurias supranta bet kuri naršyklė.

Kas yra šis įrankis?

CSS neturi specialios trikampio formos, todėl trikampiai kuriami naudojant gerai žinomą sprendimą: paimamas nulinio pločio ir nulinio aukščio elementas, vienai pusei suteikiamas vientisas kraštas, o dviem gretimoms pusėms — permatomi kraštai. Kadangi gretimi kraštai susitinka 45 laipsnių kampu, permatomi kraštai susiaurėja iki taško, todėl matomas tik spalvotas kraštas, atrodantis kaip trikampis.

Šis įrankis sukuria šią struktūrą už jus: pasirenkate, į kurią pusę turėtų rodyti trikampis, koks turėtų būti jo dydis ir spalva, tada stebite, kaip atsinaujina gyva peržiūra, ir nukopijuojate tikslų CSS kodą. Tas pats pagrindinis triukas naudojamas visame internete grynai CSS pagrįstoms rodyklėms, patarimų langelių rodyklėms ir išskleidžiamųjų meniu ženkliukams kurti.

Šaltinis: CSS Backgrounds and Borders Module Level 3, W3C — apibrėžia, kaip gretimi kraštų kraštai susitinka kampu, o tai yra mechanizmas, kuriuo remiasi ši trikampio technika.

Kodėl jį naudoti?

Gyva peržiūra atvaizduoja tikrą trikampį, todėl galite patvirtinti dydį, kryptį ir spalvą prieš ką nors kopijuodami.
Apima visas keturias pagrindines kryptis — aukštyn, žemyn, kairėn, dešinėn — vienu valdikliu.
Nereikia jokių vaizdo failų ar SVG — šitaip sukurtas trikampis yra vos kelios CSS eilutės.
Naudinga patarimų langelių rodyklėms, išskleidžiamųjų meniu / akordeonų ženkliukams, pasirinktiniams sąrašo taškams ir paprastoms dekoratyvinėms formoms.
Veikia visiškai jūsų naršyklėje — niekas, ką sukonfigūruojate, niekur neįkeliama.
Nemokama, be registracijos, veikia mobiliuosiuose įrenginiuose.

Kaip naudoti

Pasirinkite kryptį — trikampis rodo aukštyn, žemyn, kairėn ar dešinėn, priklausomai nuo to, kuri pusė gauna vientisą kraštą.
Nustatykite dydį — jis valdo border-width reikšmę visose trijose pusėse ir nulemia, koks didelis atrodys trikampis.
Pasirinkite spalvą matomam (vientisam) kraštui, kuris tampa trikampio užpildo spalva.
Nukopijuokite sugeneruotą CSS ir pritaikykite jį elementui su width: 0 ir height: 0 — tuščias <div> arba pseudo-elementas, pvz., ::before/::after, abu veikia gerai.

Pavyzdys

Įvestis

Kryptis: žemyn · Dydis: 60px · Spalva: #ea580c

Išvestis

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

Žemyn nukreiptam trikampiui vientisa spalva eina ant border-top, o kairysis ir dešinysis kraštai lieka permatomi — priešinga pusė nuo krypties, į kurią rodo trikampis.

Kodėl svarbu nulinis plotis ir aukštis

Triukas veikia tik todėl, kad elementas neturi savo turinio dėžės — width: 0 ir height: 0 reiškia, kad visa matoma forma susidaro vien iš kraštų, susitinkančių centriniame taške. Jei elementas turi bet kokį plotį ar aukštį, kraštai nebesusiaurėja į švarų tašką, ir forma sugenda. Būtent todėl ši technika vienodai gerai veikia tiek su tuščiu <div>, tiek su ::before/::after pseudo-elementu su content: "" — jokio tikro turinio nereikia, tik kraštų dėžė.

MDN dokumentacija apie CSS border savybę aprašo, kaip derinasi border-width, border-style ir border-color, įskaitant tai, kaip gretimų pusių kraštai susitinka įstrižai (developer.mozilla.org/en-US/docs/Web/CSS/border) — geometrinis faktas, ant kurio remiasi visa ši technika.

Dažniausi CSS trikampių naudojimo atvejai

Patarimų langelių ir pokalbio debesėlių rodyklės: mažas trikampis (6–10 px), pozicionuotas suapvalintos dėžutės krašte, nuspalvintas atitinkantis dėžutės foną.
Išskleidžiamųjų meniu ir pasirinkimo laukų ženkliukai: mažas žemyn rodantis trikampis šalia mygtuko ar pasirinkimo elemento, žymintis, kad jis atveria meniu.
Akordeono / išskleidimo indikatoriai: dešinėn rodantis trikampis, kuris pasisuka žemyn, kai skyrius išskleistas.
Pasirinktiniai sąrašo taškai: mažas dešinėn rodantis trikampis vietoj numatytojo naršyklės taško, suteikiantis išskirtinesnį sąrašo stilių.
Paprasti reklaminės juostos / kaspino kampai: trikampis, įterptas į kortelės kampą, imituojantis sulankstyto kaspino efektą.

Derinimas su kitais CSS įrankiais

Trikampiams, naudojamiems kaip patarimų langelių rodyklės, dažniausiai reikia atitinkamo šešėlio, kad jie vizualiai derėtų su dėžute, prie kurios prisegti — Box Shadow Generator sukuria tokį šešėlį. Sudėtingesnėms UI formoms nei trikampiai (varnelės, žvaigždės, šešiakampiai) clip-path paprastai yra geresnis modernus sprendimas, nei kraunant daugiau border triukų.

→ box-shadow generatorius · border-radius generatorius

Dažniausiai užduodami klausimai

Kodėl spalva eina ant priešingo krašto nuo krypties, į kurią rodo trikampis?

Įsivaizduokite elementą kaip deimantą, sudarytą iš keturių trikampių kraštų segmentų, susitinkančių viduryje. Jei vientisa spalva yra ant viršutinio krašto, matoma forma užima viršutinę pusę — bet kadangi elementas turi nulinį dydį, ta „viršutinė pusė“ trikampis iš tikrųjų rodo žemyn, ten, kur būtų buvusi neegzistuojanti elemento turinio dėžė. Ta pati logika taikoma visoms keturioms kryptims.

Ar galiu sukurti trikampį, kuris nėra tobula lygiašonė forma?

Taip — šis įrankis paprastumo dėlei visada sukuria simetrišką trikampį, bet galite rankiniu būdu redaguoti nukopijuotą CSS vėliau. Padarius du permatomus border-width nelygius, trikampis pakreipiamas į vieną pusę; nepriklausomai keičiant vientiso krašto plotį, keičiasi trikampio aukštis, nekeičiant jo pagrindo pločio.

Ar ši technika veikia visose naršyklėse?

Taip — border pagrindu sukurtas trikampio triukas remiasi tik pagrindiniu border-width, border-style ir border-color palaikymu, kuris egzistuoja nuo pačių ankstyviausių CSS realizacijų. Tai viena plačiausiai suderinamų grynų CSS formų kūrimo technikų.

Kada turėčiau naudoti clip-path vietoj border triuko?

Border triukas idealiai tinka būtent paprastiems trikampiams, nes jam nereikia jokių papildomų savybių ir jis veikia visur. Sudėtingesniems dalykams — penkiakampiams, žvaigždėms, rodyklėms su iškarpa ar įstrižais dėžutės pjūviais, kuriai vis dar reikia rodyti foninį vaizdą — clip-path yra lankstesnis ir lengviau suprantamas, nors turi siauresnę palaikymą senesnėse naršyklėse.

Ar galiu įdėti tekstą ar piktogramą į trikampio vidų?

Ne tiesiogiai — kadangi trikampio elementas turi nulinį plotį ir aukštį, nėra turinio dėžės, kurioje būtų galima ką nors laikyti. Norėdami sujungti trikampį su tekstu ar piktograma, naudokite jį kaip dekoratyvinį pseudo-elementą (::before/::after) tėviniame elemente, kuris jį pozicionuoja absoliučiai, o paties tėvinio elemento tikrą turinį stilizuokite atskirai.