Generator CSS trokuta

Odaberite smjer, veličinu i boju kako biste izgradili trokut od običnog CSS-a, a zatim kopirajte kod. Koristi se klasična tehnika diva bez širine i visine s prozirnim obrubima — bez slikovnih datoteka, bez SVG-a, bez clip-patha — samo nekoliko deklaracija obruba koje razumije svaki preglednik.

Što je ovaj alat?

CSS nema poseban oblik trokuta, pa se trokuti grade poznatim zaobilaznim rješenjem: uzme se element bez širine i visine, postavi mu se puni obrub na jednoj strani, a prozirni obrubi na druge dvije susjedne strane. Budući da se susjedni obrubi spajaju pod kutom od 45 stupnjeva, prozirni obrubi se sužavaju u točku, ostavljajući vidljivim samo obojeni obrub u obliku trokuta.

Ovaj alat gradi tu strukturu umjesto vas: odaberite u kojem smjeru trokut treba pokazivati, koliko treba biti velik i koje boje treba biti, a zatim pratite kako se prikaz uživo ažurira i kopirajte točan CSS. Isti trik koji se koristi diljem weba za CSS strelice, pokazivače tooltipova i strelice padajućih izbornika.

Izvor: CSS Backgrounds and Borders Module Level 3, W3C — definira kako se susjedni rubovi obruba spajaju pod kutom, što je mehanizam na kojem se temelji ova tehnika izrade trokuta.

Zašto ga koristiti?

Prikaz uživo renderira stvarni trokut kako biste potvrdili veličinu, smjer i boju prije nego što išta kopirate.
Pokriva sva četiri osnovna smjera — gore, dolje, lijevo, desno — jednom kontrolom.
Nisu potrebne slikovne datoteke ni SVG — trokut izrađen na ovaj način tek je nekoliko redaka CSS-a.
Koristan za pokazivače tooltipova, strelice padajućih izbornika/harmonika, prilagođene grafičke oznake liste i jednostavne dekorativne oblike.
Radi u potpunosti u vašem pregledniku — ništa što konfigurirate ne šalje se nikamo.
Besplatno, bez prijave, radi na mobitelu.

Kako ga koristiti

Odaberite smjer — trokut pokazuje gore, dolje, lijevo ili desno ovisno o tome koja strana dobiva puni obrub.
Postavite veličinu — ona kontrolira vrijednost border-width na sve tri strane i određuje koliko će trokut biti velik.
Odaberite boju za vidljivi (puni) obrub, koja postaje boja ispune trokuta.
Kopirajte generirani CSS i primijenite ga na element s width: 0 i height: 0 — prazan <div> ili pseudo-element poput ::before/::after oboje dobro funkcioniraju.

Primjer

Ulaz

Smjer: dolje · Veličina: 60px · Boja: #ea580c

Izlaz

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

Za trokut koji pokazuje prema dolje, puna boja ide na border-top dok lijevi i desni obrub ostaju prozirni — suprotna strana od smjera u koji trokut pokazuje.

Zašto je nulta širina i visina važna

Trik funkcionira samo zato što element nema vlastiti sadržajni okvir — width: 0 i height: 0 znače da cijeli vidljivi oblik dolazi isključivo od obruba koji se spajaju u središnjoj točki. Ako element ima bilo kakvu širinu ili visinu, obrubi se više ne sužavaju u čistu točku i oblik se lomi. Zato tehnika jednako dobro funkcionira i na praznom <div>-u i na ::before/::after pseudo-elementu s content: "" — nije potreban stvarni sadržaj, samo okvir obruba.

MDN-ova dokumentacija o CSS svojstvu border objašnjava kako se border-width, border-style i border-color kombiniraju, uključujući kako se obrubi na susjednim stranama spajaju dijagonalno (developer.mozilla.org/en-US/docs/Web/CSS/border) — geometrijska činjenica na kojoj se cijela ova tehnika temelji.

Uobičajene primjene CSS trokuta

Pokazivači tooltipova i oblačića za govor: mali trokut (6–10px) postavljen na rub zaobljenog okvira, obojen u boju koja odgovara pozadini okvira.
Strelice padajućih izbornika i select elemenata: mali trokut prema dolje pored gumba ili select elementa koji označava da se otvara izbornik.
Pokazatelji harmonike/proširenja: trokut prema desno koji se rotira prema dolje kad je odjeljak proširen.
Prilagođene oznake liste: mali trokut prema desno umjesto zadane grafičke oznake preglednika, za prepoznatljiviji stil liste.
Jednostavni kutovi banera/vrpci: trokut ugurani u kut kartice koji simulira efekt presavijene vrpce.

Kombiniranje s drugim CSS alatima

Trokuti koji se koriste kao pokazivači tooltipova obično trebaju odgovarajuću sjenu kako bi vizualno pristajali okviru na koji su pričvršćeni — Box Shadow Generator proizvodi tu sjenu. Za UI oblike koji nadilaze trokute (kvačice, zvijezde, šesterokuti), clip-path je općenito bolji moderan pristup umjesto slaganja dodatnih trikova s obrubima.

→ Generator box-shadow · Generator border-radius

Često postavljana pitanja

Zašto boja ide na suprotni obrub od smjera u koji trokut pokazuje?

Zamislite element kao dijamant sastavljen od četiri trokutasta segmenta obruba koji se spajaju u sredini. Ako je puna boja na gornjem obrubu, vidljivi oblik zauzima gornju polovicu — ali budući da element ima nultu veličinu, taj 'gornji dio' u obliku trokuta zapravo pokazuje prema dolje, prema mjestu gdje bi bio nepostojeći sadržajni okvir elementa. Ista logika vrijedi za sva četiri smjera.

Mogu li napraviti trokut koji nije savršeno jednakokračan?

Da — ovaj alat uvijek generira simetričan trokut radi jednostavnosti, ali kopirani CSS možete naknadno ručno urediti. Ako širine dva prozirna obruba nisu jednake, trokut se iskošava na jednu stranu; promjena širine punog obruba neovisno mijenja njegovu visinu bez utjecaja na širinu baze.

Radi li ova tehnika u svim preglednicima?

Da — trik s trokutom temeljenim na obrubima oslanja se samo na osnovnu podršku za border-width, border-style i border-color, koja postoji od najranijih implementacija CSS-a. Jedna je od najkompatibilnijih tehnika za čiste CSS oblike koje postoje.

Kada bih trebao koristiti clip-path umjesto trika s obrubima?

Trik s obrubima idealan je posebno za jednostavne trokute, jer ne treba dodatna svojstva i radi svugdje. Za sve složenije — peterokute, zvijezde, strelice s urezom ili dijagonalne rezove na okviru koji i dalje treba prikazati sliku pozadine — clip-path je fleksibilniji i lakši za razumjeti, iako ima užu podršku u starijim preglednicima.

Mogu li unutar trokuta staviti tekst ili ikonu?

Ne izravno — budući da element trokuta ima nultu širinu i visinu, nema sadržajnog okvira koji bi nešto sadržavao. Za kombiniranje trokuta s tekstom ili ikonom, koristite ga kao dekorativni pseudo-element (::before/::after) na roditeljskom elementu koji ga apsolutno pozicionira, a zatim odvojeno stilizirajte stvarni sadržaj roditelja.