Kako napraviti trokut u CSS: najprikladniji način

Vrlo često moderne lijepe web stranice sadrže mnoge atraktivne grafičke elemente. Među njima najjednostavnija geometrijska slika koristi se kao trokut, koji se koristi za oblikovanje mnogih elemenata. Na primjer, upotrebljavam ih kao pokazivač određenom objektu na stranici, tako da posjetitelj stranice skrene svoju pažnju prema njemu. Naravno, glavna funkcija trokuta je ukrasna, jer blokovi koji ih sadrže postaju moderniji i privlačniji.

Svatko ne zna kako stvoriti takve oblike pomoću kaskadnih stilskih listova, i pitaju se kako napraviti trokut u CSS-u.

Primjena u izradi web stranica

U web dizajnu, trokuti se nalaze posvuda. Oni čine savjete, izbornike, sve vrste elemenata korisničkog sučelja. Ponekad se koriste pri izradi indikatora procesa podizanja sustava. A ako je bilo moguće učiniti bez njih prije, sada je nemoguće, a programeri su dužni prilagoditi se takvim zahtjevima. Uostalom, danas trokut stvoren u CSS-u najvažniji je dio izgradnje međusobne veze između dijelova sučelja i ujedinjenja u jednu cjelinu.

Mnogi umjetnici izgleda zbunjuju se kada dobiju izgled, u čijem je sastavu često trokut. Uostalom, nema nikakvih svojstava koja bi izravno stvorila ovu geometrijsku figuru. Zapravo, postoji nekoliko načina za to.

Kako stvoriti pomoću okvira

Prva metoda koja vam omogućuje stvaranje trokuta u CSS je granica. Upotreba okvira. Unatoč činjenici da granice koje se stvaraju pomoću granične imovine nemaju izravan odnos s trokutom, najčešće se koristi za tu svrhu.

Prilikom postavljanja nulte visine i širine objekta, kao i postavljanja debele granice, možete vidjeti trg koji se sastoji od četiri jednaka trokuta. Izigrati je da trebate samo ostaviti potrebnu granicu, a ostatak učiniti transparentnim. I tako dobivamo trokut nacrtan u CSS pravom smjeru i boji.

Izrada kutova pomoću "border" imovine je prikladna, jer nema potrebe za crtanjem slike pomoću bilo kojeg grafičkog urednika. Parametri trokuta mogu se uvijek mijenjati u kodu. I štedi vrijeme za razvojnog programera. Kombinirajući različitu širinu okvira, to je dovoljno lako za dobivanje oblika. Da biste shvatili kako to funkcionira, možete jednostavno izraditi prazan element širine nula, visine i vrlo debele okvire različitih boja na svakoj strani. Dakle, čineći tri strane transparentne strane, dobivajte trokuta različitih tipova:

• Trokut koji gleda lijevo, čije su strane jednake;
• trokut, gledajući lijevo i spljošten;
• izduženi trokut, gledajući lijevo;
• desni trokut, s pravim kutom na lijevoj strani;
• trokut gleda dolje;
• trokut gleda gore;
• trokut koji gleda na pravu i mnoge druge sorte.

Korištenje pseudo-dementora

Pomoću takvih tehnika moguće je stvoriti uglove u pop-up upute i upute. Da bi spojili trokut na blok preko CSS-a, većina programera koristi takve pseudo-elemente kao i poslije i prije. Ako ih upotrebljavate zajedno, možete nacrtati trokut u CSS-u koji ima potez.

Kombinirajući ih, programeri stvaraju puno lijepih strelica, primjenjujući imovinu pozicija: relativna na roditeljski element. To je učinjeno tako da se pseudo-elementi ne iseljavaju s njihovih mjesta.

Profesionalni korisnici CSS okvir za stvaranje trokuta su:

• brzo i jednostavno uređivanje veličine i boje s svojstvima;
• podržavaju sve preglednike.

kontra:

• jer se okviri koriste, nema mogućnosti primjenjivati ​​gradijente, sjene;
• ponekad kada korisnik pogleda stranicu u pregledniku Firefox, transparentnost možda neće funkcionirati, a to će iskriviti sliku.

Korištenje gotovih slika

Sljedeća metoda stvaranja trokuta jest uporaba enkodirane slike. Trokut se povlači unaprijed u grafičkom uredniku i pretvaraju se u posebni kod pomoću specijaliziranih usluga.

Plus ove metode je da možete napraviti vrlo lijep dizajn sa sjenama, gradijentima i okvira, a zatim samo kod sve. A nedostaci se mogu pripisati činjenici da svi ne poznaju grafičke programe. Osim toga, ako je slika vrlo velika, linija koda jednostavno je ogromna. Ovo je neprikladno za razvojnog programera.

Zasebna točka je uporaba preglednika Internert Explorer starijih verzija. U njima, ova metoda jednostavno neće funkcionirati.

Inverzna kvadratna metoda

Jedan od načina je stvoriti CSS s obrnutim kvadratom. Ovdje su potrebna dva bloka. Ali neki ljudi koriste pseudo-elemente.

Prvo se stvara trg. Bit će to sadržaj rotiranog elementa. Zatim se zakreće za 45 stupnjeva kako bi izgledao poput dijamanta. Zatim se pomiče, a vanjski blok skriva se pomoću preljeva: skrivene imovine. Ovo rješenje također nije cross-preglednik, a ponekad se slika neće prikazati po želji.

rezultati

Dakle, postoje mnoge metode za stvaranje trokuta. Ali kako se ne bi izgubili u svim ovim CSS svojstvima? Imenik u ovom slučaju uvijek će pomoći. Opisuje sva svojstva kaskadnih stilskih listova.

Za one koji ne žele ući u programiranje i pregledavati CSS katalog, postoje online uređivači koji generiraju trokute pravih veličina i boja. U vizualni urednik korisnik odabire i prilagođava sve parametre oblika. Pretvoreno u CSS kôd trokut generator stavlja u zasebni prozor izravno u letu. Tada generirani kôd jednostavno se umetne u list stila i prilagođava se dizajnu stranice.