CSS-kolmiogeneraattori

Valitse suunta, koko ja väri rakentaaksesi kolmion pelkästä CSS:stä, kopioi sitten koodi. Tämä käyttää klassista nolla-leveyden/nolla-korkeuden div-tekniikkaa läpinäkyvillä reunuksilla — ei kuvatiedostoja, ei SVG:tä, ei clip-path-ominaisuutta — vain kourallinen border-määrittelyjä, jotka jokainen selain ymmärtää.

Mikä tämä työkalu on?

CSS:ssä ei ole omaa kolmiomuotoa, joten kolmiot rakennetaan tunnetulla kiertotiellä: otetaan elementti, jonka leveys ja korkeus ovat nolla, annetaan sille yhtenäinen reunus yhdellä sivulla ja läpinäkyvät reunukset kahdella viereisellä sivulla. Koska vierekkäiset reunukset kohtaavat 45 asteen kulmassa, läpinäkyvät reunukset kapenevat pisteeksi, jättäen näkyviin vain värillisen reunuksen kolmiona.

Tämä työkalu rakentaa tämän rakenteen puolestasi: valitse mihin suuntaan kolmion pitäisi osoittaa, kuinka suuri sen pitäisi olla, ja minkä värinen sen pitäisi olla, katso sitten live-esikatselun päivittyvän ja kopioi täsmällinen CSS. Sama peruste temppu jota käytetään ympäri webiä pelkillä CSS-nuolilla, työkaluvihjeiden osoittimilla ja pudotusvalikkojen kärjillä.

Lähde: CSS Backgrounds and Borders Module Level 3, W3C — määrittelee miten vierekkäiset reunuksen reunat kohtaavat kulmassa, mikä on mekanismi jonka varaan tämä kolmiotekniikka rakentuu.

Miksi käyttää sitä?

Live-esikatselu renderöi varsinaisen kolmion, jotta voit vahvistaa koon, suunnan ja värin ennen mitään kopiointia.
Kattaa kaikki neljä perussuuntaa — ylös, alas, vasemmalle, oikealle — yhdellä säätimellä.
Ei kuvatiedostoja tai SVG:tä tarvita — näin rakennettu kolmio on vain muutama rivi CSS:ää.
Hyödyllinen työkaluvihjeiden osoittimiin, pudotusvalikko-/harmonikkakärkiin, mukautettuihin luettelomerkkeihin ja yksinkertaisiin koristemuotoihin.
Toimii kokonaan selaimessasi — mitään määrittämääsi ei ladata mihinkään.
Ilmainen, ei rekisteröitymistä, toimii mobiilissa.

Käyttöohje

Valitse suunta — kolmio osoittaa ylös, alas, vasemmalle tai oikealle riippuen siitä, mikä sivu saa yhtenäisen reunuksen.
Aseta koko — tämä hallitsee border-width-arvoa kaikilla kolmella sivulla ja määrittää kuinka suurena kolmio näkyy.
Valitse väri näkyvälle (yhtenäiselle) reunukselle, josta tulee kolmion täyttöväri.
Kopioi luotu CSS ja sovella se elementtiin jonka width: 0 ja height: 0 — tyhjä <div> tai pseudoelementti kuten ::before/::after toimivat molemmat hyvin.

Esimerkki

Syöte

Suunta: alas · Koko: 60px · Väri: #ea580c

Tuloste

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

Alaspäin osoittavassa kolmiossa yhtenäinen väri menee border-top-ominaisuuteen, kun taas vasen ja oikea reunus pysyvät läpinäkyvinä — vastakkainen sivu siitä suunnasta johon kolmio osoittaa.

Miksi nollaleveys ja -korkeus ovat tärkeitä

Temppu toimii vain koska elementillä ei ole omaa sisältölaatikkoa — width: 0 ja height: 0 tarkoittavat että koko näkyvä muoto tulee puhtaasti reunuksista, jotka kohtaavat keskipisteessä. Jos elementillä on mitään leveyttä tai korkeutta, reunukset eivät enää kapene puhtaaksi pisteeksi ja muoto rikkoutuu. Tästä syystä tekniikka toimii yhtä hyvin tyhjällä <div>-elementillä tai ::before/::after-pseudoelementillä, jonka content: "" — varsinaista sisältöä ei tarvita, vain reunuslaatikko.

MDN:n dokumentaatio CSS:n border-ominaisuudesta käsittelee miten border-width, border-style ja border-color yhdistyvät, mukaan lukien miten vierekkäisten sivujen reunukset kohtaavat diagonaalisesti (developer.mozilla.org/en-US/docs/Web/CSS/border) — geometrinen tosiasia jonka varaan koko tämä tekniikka rakentuu.

CSS-kolmioiden yleiset käyttötavat

Työkaluvihjeiden ja puhekuplien osoittimet: pieni kolmio (6–10px) sijoitettuna pyöristetyn laatikon reunalle, väritettynä vastaamaan laatikon taustaa.
Pudotusvalikko- ja select-kärjet: pieni alaspäin osoittava kolmio painikkeen tai select-elementin vieressä osoittamaan että se avaa valikon.
Harmonikka-/laajennusindikaattorit: oikealle osoittava kolmio joka kääntyy osoittamaan alas kun osio laajennetaan.
Mukautetut luettelomerkit: pieni oikealle osoittava kolmio oletusselaimen luettelomerkin sijaan, erottuvamman luettelotyylin saamiseksi.
Yksinkertaiset banneri-/nauhakulmat: kolmio taitettuna kortin kulmaan simuloimaan taitetun nauhan efektiä.

Yhdistäminen muihin CSS-työkaluihin

Työkaluvihjeen osoittimina käytetyt kolmiot tarvitsevat yleensä vastaavan pudotusvarjon istuakseen visuaalisesti laatikkoon johon ne on kiinnitetty — Box Shadow -generaattori tuottaa tuon varjon. Käyttöliittymämuodoissa jotka menevät kolmioita pidemmälle (nuolenpäät, tähdet, kuusikulmiot), clip-path on yleensä parempi moderni lähestymistapa lisäreunustemppujen pinoamisen sijaan.

→ Box Shadow -generaattori · Border Radius -generaattori

Usein kysytyt kysymykset

Miksi väri menee vastakkaiseen reunukseen siitä suunnasta johon kolmio osoittaa?

Kuvittele elementti timanttina, joka koostuu neljästä kolmiomaisesta reunussegmentistä jotka kohtaavat keskellä. Jos yhtenäinen väri on yläreunuksessa, näkyvä muoto käyttää yläpuoliskoa — mutta koska elementillä on nollakoko, tämä "yläpuolisko"-kolmio itse asiassa osoittaa alaspäin, kohti sitä missä elementin olemattoman sisältölaatikon olisi pitänyt olla. Sama logiikka pätee kaikkiin neljään suuntaan.

Voinko tehdä kolmion, joka ei ole täydellisen tasakylkinen?

Kyllä — tämä työkalu luo aina symmetrisen kolmion yksinkertaisuuden vuoksi, mutta voit muokata kopioitua CSS:ää jälkikäteen käsin. Kahden läpinäkyvän reunuksen leveyden tekeminen epätasaiseksi vinouttaa kolmion toiselle sivulle; yhtenäisen reunuksen leveyden muuttaminen erikseen muuttaa sen korkeutta vaikuttamatta sen kannan leveyteen.

Toimiiko tämä tekniikka kaikissa selaimissa?

Kyllä — reunuspohjainen kolmiotemppu perustuu vain perus border-width-, border-style- ja border-color-tukeen, joka on ollut olemassa varhaisimmista CSS-toteutuksista lähtien. Se on yksi laajimmin yhteensopivista puhtaan CSS:n muototekniikoista.

Milloin minun pitäisi käyttää clip-path-ominaisuutta reunustempun sijaan?

Reunustemppu on ihanteellinen nimenomaan yksinkertaisille kolmioille, koska se ei tarvitse ylimääräisiä ominaisuuksia ja toimii kaikkialla. Kaikkeen monimutkaisempaan — viisikulmiot, tähdet, lovella varustetut nuolet tai diagonaaliset leikkaukset laatikossa joka silti tarvitsee taustakuvan — clip-path on joustavampi ja helpompi hahmottaa, vaikkakin sillä on suppeampi vanhempien selainten tuki.

Voinko laittaa tekstiä tai kuvakkeen kolmion sisään?

Ei suoraan — koska kolmion elementillä on nollaleveys ja -korkeus, siinä ei ole sisältölaatikkoa mihin mitään voisi sijoittaa. Yhdistääksesi kolmion tekstiin tai kuvakkeeseen, käytä sitä koristeellisena pseudoelementtinä (::before/::after) yläelementissä joka asemoi sen absoluuttisesti, ja tyylitä yläelementin varsinainen sisältö erikseen.