Kako CSS trokut: najviše odgovara načina

Vrlo često lijepe moderne web stranice sadrže mnoge atraktivne grafike. Među njima je najjednostavniji koristi takav geometrijski oblik kao trokut, koji se koristi za izradu većeg broja elemenata. Na primjer, oni se koriste kao pokazivač na objekt na stranici za posjetitelj okrenuo pozornost na njega. Naravno, glavna funkcija trokuta - ukrasna, kao blokovi koji ih sadrže, postaju sve više moderan i atraktivan.

Nije svatko zna kako stvoriti takav lik kroz Cascading Style Sheets, i pitate kako napraviti trokut u CSS.

Primjena u dizajnu web stranice

U web dizajna trokuta posvuda. Oni su izrađene savjete, izbornici, razne elemente korisničkog sučelja. Ponekad se koristi za stvaranje pokazatelj postupku podizanja. A ako je ranije bilo je moguće učiniti bez njih, ali sada je to nemoguće, a programeri su dužni prilagoditi tim zahtjevima. Uostalom, danas je generirana za CSS trokut - važnu ulogu u izgradnji povezanosti dijelova sučelja i spajanje u jednu cjelinu.

Mnoge web dizajneri su zbunjeni kada je u pitanju izgled, čija konstrukcija je vrlo često trokuta. Uostalom, nema svojstva koja bi izravno stvoriti ovaj geometrijski lik. U stvari, postoji više načina da to učinite.

Postupak izrade okvira koristeći

Prva metoda omogućuje vam da stvoriti trokut u CSS - granice. On koristi okvire. Unatoč činjenici da su granice koje su stvorene pomoću graničnog imovine nije izravno vezano za trokut, koristi se najčešće za tu svrhu.

Prilikom postavljanja nultu visinu i širinu objekta, kao i ugradnju guste granice, možete vidjeti trg, koji je podijeljen u četiri jednaka trokuta. Trik je u tome što je potrebno da bi samo potrebne granice, a drugi da bi transparentno. A sada, ispada trokut nacrtan u CSS pravom smjeru i boji.

Napravite kutove pomoću svojstva „okvir” je prikladan jer nema potrebe za crtanje slike s bilo kojeg uređivanje. trokut parametri se uvijek može mijenjati u kodu. I to štedi vrijeme programeru. Kombinirajući različite širine okvira lako je dovoljno da se lik. Da biste razumjeli kako to funkcionira, možete jednostavno stvoriti prazan element s nula širina, visina i vrlo gusta okvir drugačije boje na svakoj strani. Dakle, što tri strane od četiri prozirne trokuta su različitih vrsta:

• trokut, gleda lijevo, a čije su jednaki;
• trokut, gledajući lijevo i spljošten;
• izduženi trokut, okrenuta lijevo;
• angled trokut, čija je lijeva na desno kut;
• trokut gleda prema dolje;
• trokut gleda gore;
• trokut, gleda na desno, i mnoge druge vrste.

Korištenje psevdoedementov

S tim tehnikama, možete stvoriti kutova u pop-up uputama i savjetima. Za dodavanje putem CSS trokut na jedinicu, uglavnom programeri koristiti kao što je pseudo-nakon i prije. Ako ih koristite zajedno, moguće je izvući u CSS trokut ima moždani udar.

Njihovim kombiniranjem, programeri stvaraju razne prekrasne pucač, primjenjujući u vlasništvu poziciju: u odnosu na osnovni element. To je učinjeno kako bi se pseudo-nije preselio iz svojih mjesta.

Plus korištenje CSS okvir za stvaranje trokuta su:

• brzo i jednostavno uređivanje veličina i boja uz pomoć svojstava;
• podržava sve preglednike.

kontra:

• jer se koristi u kadar, ne postoji mogućnost da se prijave na nizbrdici, sjene;
• Ponekad, kada korisnik gleda stranicu Firefox preglednik, alfa vrijednost možda neće raditi, a to će iskriviti sliku.

Koristeći gotove slike

Sljedeća metoda stvaranja trokuta - je korištenje kodiranih slika. Trokut je nacrtana unaprijed u editor slika i pretvoriti u poseban kod sa specijaliziranih usluga.

Prednost ove metode je u tome što se može napraviti vrlo lijep dizajn sa sjenama, gradijentima, a okvir i onda samo to sve kodirati. No, nedostatak je činjenica da nisu svi tečno grafičkih programa. Osim toga, ako je slika jako velika, linija koda dobiva se jednostavno ogroman. To je nezgodno za developer.

Poseban predmet vrijedan korištenje preglednika Internert Explorer stare verzije. U njima je metoda jednostavno ne radi.

Postupak invertirani kvadrat

Jedan od načina je da napravite sredstvo za CSS obrnut trga. Postoje dva osnovna jedinica. No, neki ljudi koriste pseudo.

Prvo, stvoriti kvadrat. To će biti sadržaj rotirajućeg člana. Zatim ga rasporediti po 45 stupnjeva, tako da je izgledalo kao dijamant. Zatim je pomak prema gore i vanjska jedinica skrivena od imovine preljeva: skriveno. Ovo rješenje nije cross-preglednik, a ponekad se slika ne prikazuje po želji.

rezultati

Dakle, postoje mnoge metode za stvoriti trokut. Samo da ne bi izgubio u svim tim CSS svojstva? Reference u ovom slučaju uvijek će pomoći. On opisuje sve značajke Cascading Style Sheets.

Za one koji ne žele ići u programiranje i prikaz CSS-vodič, postoje online urednici koji stvaraju trokuti prave veličine i boje. U vizualni editor, korisnik odabire i konfigurira sve postavke lik. Pretvoren u CSS koda generator trokuta smještenog u zasebnom prozoru na letjeti. Zatim, generirani kôd je jednostavno umetnuti u stilovima i da stane na dizajn stranice.