CSS-kolmiogeneraattori
CSS-kolmiogeneraattorin työkalu
Tietoja CSS-kolmio-generaattorista
Luo puhtaita CSS-kolmioita klassisen border-trickin avulla — ei SVG:tä, ei kuvia. Valitse yksi kahdeksasta suunnasta, aseta leveys ja korkeus pikseleinä, valitse väri, ja kopioi itsenäinen .triangle { width: 0; height: 0; ... } -sääntö, joka renderöi muodon kokonaan läpinäkyvistä ja väreilläöisistä rajoista.
Käyttöohje
1. Klikkaa Suunta-painiketta (ylös, alas, vasemmalle, oikealle, tai yksi neljästä kulmasta: ylä-vasen, ylä-oikea, ala-vasen, ala-oikea). 2. Valitse kolmion Väri värinvalitsijalla. 3. Vedä Leveys (10–200px) ja Korkeus (10–200px) liukusäätimiä. 4. Kopioi generoitu CSS koodipaneelista.
Suunnat selitettynä
ylös / alas / vasemmalle / oikealle tuottavat tasasivuisia kolmioita osoittamaan kyseiseen suuntaan, rakennettu kahdesta yhtä suuresta läpinäkyvästä rajasta ja yhdestä väritetystä rajasta. ylä-vasen, ylä-oikea, ala-vasen, ala-oikea tuottavat suorakulmia kulmakolmioita yhden väritetyn rajan ja yhden läpinäkyvän rajan avulla. Tuloste asettaa aina width: 0 ja height: 0 .triangle-luokkaan.
▶Miksi kolmioni on väärän värinen kun liitäm CSS:n?
▶Voinko tehdä tasasivuisen kolmion?
▶Mikä CSS-luokka tuloste käyttää?
▶Toimiiko tämä ei-suorakulmaisille kolmioille?
Jos tämä työkalu on ollut sinulle hyödyllinen, harkitse kahvin ostamista.
Osta minulle kahvi