Miten CSS kolmio: kätevin tapoja

Hyvin usein kaunis moderni Internet-sivut sisältävät monia houkuttelevia grafiikkaa. Niistä yksinkertaisin käyttää, kuten geometrinen muoto kolmio, jota käytetään suunnitella useita elementtejä. Esimerkiksi niitä käytetään osoitin objektin sivulle vierailija käänsi huomionsa häneen. Tietenkin päätehtävä kolmion - koristeellinen, lohkoina, jotka sisältävät niitä, ovat yhä moderni ja houkutteleva.

Kaikki eivät tiedä, miten luoda sellainen luku kautta CSS, ja ihmettelevät, miten tehdä kolmio CSS.

Sovellus suunnittelussa sivustoja

Web design kolmioita kaikkialla. Ne on tehty vinkkejä, valikot, eri käyttöliittymän osat. Joskus ne ovat tottuneet luomaan mittarina käynnistyksen. Ja jos aikaisemmin oli mahdollista tehdä ilman niitä, mutta nyt se on mahdotonta, ja kehittäjät joutuvat sopeutumaan näihin vaatimuksiin. Loppujen lopuksi tänään luotu CSS kolmio - tärkeä osa rakentamiseen välisinä liitännän osittain ja yhdistää yhdeksi kokonaisuudeksi.

Monet web-suunnittelijat ovat ymmällään, kun se tulee ulkoasun, jonka rakenne on hyvin usein kolmioita. Loppujen lopuksi ei ominaisuuksia, jotka suoraan luoda tämän geometrisen kuvion. Itse asiassa on olemassa useita tapoja tehdä tämä.

Menetelmä luoda runkoon

Ensimmäinen menetelmä voit luoda kolmio CSS - rajalla. Hän käyttää kehyksiä. Huolimatta siitä, että rajat, jotka on luotu käyttäen rajojen omaisuutta ei liity suoraan kolmion, sitä käytetään useimmiten tähän tarkoitukseen.

Kun asetetaan nolla korkeus ja leveys esineen sekä asennuksen Paksu reunus, näet neliö, joka on jaettu neljään yhtä suureen kolmioita. Juju on, että sinun täytyy pitää vain tarvittava rajalla, ja toiset tehdä läpinäkyvä. Ja nyt, se kääntyy pois kolmio piirretään CSS oikeaan suuntaan ja väri.

Luo kulman käyttämällä ominaisuudet "runko" on kätevä, koska ei ole tarvetta tehdä kuvia millä tahansa muokkausta. kolmio parametrit voidaan aina muuttaa koodin. Ja se säästää aikaa kehittäjä. Yhdistämällä eri rungon leveys on helppoa saada kuva. Ymmärtää, miten se toimii, voit luoda tyhjän elementin nolla leveys, korkeus, ja erittäin paksu runko erivärisiä kummallakin puolella. Joten, jolloin kolme sivua neljä läpinäkyvää kolmiot ovat erilaisia:

• kolmio, etsivät vasemmalle, jonka sivut ovat yhtä suuria;
• kolmio, katsomaan vasemmalle ja litistetty;
• pitkänomainen kolmio, osoittaa vasemmalle;
• suorakulmaisen kolmion, jonka vasemmalta oikealle kulmaan;
• kolmio näköinen alaspäin;
• kolmio etsimisessä;
• kolmio, haluavat oikealle, ja monet muut lajit.

käyttämällä psevdoedementov

Näillä tekniikoilla voidaan luoda kulmat pop-up ohjeita ja vinkkejä. Liittää CSS kolmio yksikköön, enimmäkseen ohjelmoijat käyttävät kuten pseudo-jälkeen ja ennen. Jos käytät niitä yhdessä, on mahdollista tehdä CSS kolmion aivohalvauksen.

Yhdistämällä ne, kehittäjät luovat erilaisia kauniita ampuja, soveltamalla omaisuus kanta: suhteellinen jotta emoelementin. Tämä tehdään, jotta näennäispäätteelle ei siirretä pois paikoiltaan.

Plus käyttö CSS puitteiden luomiseen kolmiot ovat:

• nopea ja helppo muokata eri kokoja ja värejä avulla ominaisuuksia;
• tue kaikkia selaimia.

miinukset:

• koska se käyttää runko, ei ole mahdollista soveltaa kaltevuudet, varjot;
• Joskus, kun käyttäjä tarkastelee sivun Firefox-selaimessa, alfa-arvo ei välttämättä toimi, ja se vääristää kuvaa.

Valmiilla kuvat

Seuraavaa menetelmää luoda kolmiot - on käyttää koodattujen kuvien. Kolmio vedetään etukäteen kuvankäsittelyohjelmassa ja muunnetaan erityinen koodi erikoistuneita palveluja.

Tämän menetelmän etuna on, että voit tehdä hyvin kaunis muotoilu varjoja, kaltevuudet, ja runko ja sitten vain koodata kaiken. Mutta haittapuoli on se, että kaikki eivät ole sujuvaa kuvankäsittelyohjelmilla. Lisäksi, jos kuva on hyvin suuri, linja-koodi on saatu yksinkertaisesti valtava. Tämä on hankalaa kehittäjä.

Erillinen arvoiseen käyttöön selainten Internert Explorerin vanhaa versiota. Niissä menetelmä ei yksinkertaisesti toimi.

Menetelmä ylösalaisin neliö

Yksi tapa on luoda keinoja CSS ylösalaisin neliön. On olemassa kaksi perusyksikkö. Mutta jotkut ihmiset käyttävät pseudo.

Ensin luodaan neliö. Se on sisällön pyörivän elimen. Sitten ottaa sen 45 astetta, niin että se näytti kuin timantti. Seuraavaksi shift-up ja ulkoinen laite on piilotettu ominaisuus ylivuoto: piilotettu. Tämä ratkaisu ei myöskään ole rajat selaimen, ja joskus ei näy kuvaa halutulla tavalla.

tulokset

Niin, on olemassa monia tapoja luoda kolmio. Vain se ei eksy kaikissa näissä CSS-ominaisuuksia? Viittaus tässä tapauksessa aina auttaa. Siinä kuvataan kaikki ominaisuudet CSS.

Niille, jotka eivät halua mennä ohjelmointi ja tarkastella CSS-opas, on online toimittajat, jotka tuottavat kolmiot oikean kokoisia ja värisiä. Vuonna visuaalinen editori, käyttäjä valitsee ja määrittää kaikki asetukset hahmo. Muunnetaan CSS generaattori kolmio sijoitetaan erilliseen ikkunaan lennossa. Sitten luotu koodi on yksinkertaisesti työnnetään tyylitiedoston ja sopimaan sivun rakennetta.