Hoe dogge CSS trijehoek: de meast handige manieren

Hiel faak moaie moderne websiden befetsje in protte oantreklike graphics. Ûnder harren de simpelste brûkt sokke geometryske foarm as in trijehoeke, dy't brûkt wurdt om te ûntwerpen in mearfâldichheid fan eleminten. Bygelyks, se wurde brûkt as oanwizer nei in objekt op de side foar de besiker draaide syn oandacht nei him. Fansels, de wichtichste funksje fan de trijehoek - in dekoratyf, lykas blokken dy't befetsje se, wurde hieltyd moderner en oantrekliker.

Net elkenien wit hoe te meitsjen sa'n figuer fia Cascading Style Sheets, en binne benijd hoe't om in trijehoek yn CSS.

Applikaasje yn it ûntwerp fan sites

Yn web design trijehoeken oeral. Se wurde makke út tips, menu 's, ferskate UI eleminten. Soms wurde se brûkt foar it meitsjen fan in yndikator fan de Lears proses. En as earder wie it mooglik om te dwaan sûnder harren, mar no is it ûnmooglik, en de ûntwikkelers binne ferplichte te passen oan sokke easken. Ommers, hjoed makke yn CSS trijehoek - in wichtich oandiel yn 'e oanlis fan ûnderlinge keppeling tusken de ûnderdielen fan de ynterface en fusearjen ta ien entiteit.

In soad web ontwerpers binne perplexed as it giet om de opmaak, it ûntwerp fan dat is hiel faak trijehoeken. Ommers, gjin eigenskippen dy't soe streekrjocht meitsje dizze geometryske figuer. Yndie, der binne meardere metoaden te dwaan.

In wize fan meitsjen frame brûkend

De earste metoade lit ta jo te meitsjen in trijehoek yn de CSS - grins. Hy wurdt mei help fan frames. Nettsjinsteande it feit dat de grinzen dy't makke mei help fan de grins eigenskip wurdt net streekrjocht ferbûn is oan de trijehoeke, wurdt it brûkt meast faak foar dit doel.

Wannear't it ynstellen fan de nul hichte en breedte fan it foarwerp, en ek de ynstallaasje fan in dikke grins, kinne jo sjogge it plein, dat is opdield yn fjouwer gelikense trijehoeken brûkt wurde. De trúk is dat jo moatte hâlden allinne de nedige grins, en de oaren te meitsjen transparant. En no, dan blykt in trijehoek tekene yn de CSS rjochts rjochting en kleur.

Meitsje hoeken mei help fan de eigenskippen "frame" is handich omdat der gjin ferlet te lûken foto mei help fan alle editing. triangle parameters kinne altyd feroare wurde yn de koade. En dat skeelt tiid developer. Troch it kombinearjen fan de ferskate breedte fan it frame is it maklik genôch om de figuer. Om begripe hoe't it wurket, kinne jo gewoan meitsje in lege elemint mei in nul breedte, hichte, en tige dikke frame in oare kleur oan eltse kant. Sa, wêrtroch de trije kanten fan de fjouwer transparante trijehoekjes binne fan ferskate soarten:

• trijehoeke, op syk nei links, de kanten wêrfan lyk binne,
• trijehoeke, looking left en flattened;
• in lang útrekt trijehoeke, facing left;
• angled trijehoeke, waans lofts nei rjochts hoeke;
• triangle looking downwards;
• triangle looking up;
• trijehoeke, op syk nei rjochts, en in protte oare soarten.

Mei help fan psevdoedementov

Mei dy techniken, kinne jo oanmeitsje hoeken yn de pop-up ynstruksjes en tips. Om attach fia CSS trijehoek nei de ienheid, meast programmeurs brûke lykas in pseudo-nei en foar. As jo brûke se byinoar, is it mooglik om te lûken yn de CSS trijehoeke hawwende in oerhaal.

Troch it kombinearjen fan harren, ien fan de ûntwikkelders meitsje in ferskaat oan moaie skutter, it oanbringen fan eigendom posysje: relatyf oan de âlder elemint. Dit wurdt dien om te Pseudo-net ferhuze út harren sitten.

Plus it brûken fan CSS ramt foar it meitsjen fan trijehoeken binne:

• flugge en ienfâldige bewurkjen fan maten en kleuren mei help fan eigenskippen;
• stypje alle browsers.

Cons:

• omdat it brûkt it frame, der is gjin mooglikheid om te passen gradients, skaden;
• soms, doe't de brûker sjocht oan de side fan Firefox browser, de alpha wearde kin net wurkje, en dit sil fersteure de ôfbylding.

It brûken ready-made foto

De folgjende metoade fan it meitsjen fan trijehoeken - is it brûken fan fersifere ôfbyldings. De trijehoek wurdt lutsen foarôf yn in ôfbylding bewurker en omboud ta in spesjale koade mei spesjalisearre tsjinsten.

Foardiel fan dizze metoade is dat jo allinne mar efkes hiel moaie design mei skaden, gradients, en frame en dan gewoan kodearjen it allegear. Mar de nadeel is it feit dat net eltsenien is floeiend yn graphics programma. Boppedat, as it byld is hiel grut, de line fan koade wurdt krigen troch gewoan enoarm. Dit is lastig foar de ûntwikkelder.

In aparte item wurdich it brûken fan blêders Internert Explorer âlde ferzjes. Yn harren, de metoade gewoan net wurket.

Metoade inverted fjouwerkant

Ien manier is om in middel fan de CSS inverted plein. Der binne twa basis ienheid. Mar guon minsken brûke pseudo.

As earste, jo meitsje in fjouwerkant. It sil wêze de ynhâld fan de draaiende lid. Dan ynsette dat troch 45 graden, sadat it like derop dat in diamant. Folgjende, de ferskowing-up en in eksterne ienheid wurdt ferstoppe troch it eigendom oerrin: ferstoppe. Dit oplossing ek is net in krús-browser, en soms de foto wurdt net werjûn as winske.

resultaten

Sa binne der in soad metoaden te meitsjen in trijehoek. Allinne is it net ferdwale yn al dy CSS eigenskippen? Ferwizing yn dit gefal sille altyd helpe. It beskriuwt alle funksjes fan cascadearjende stylblêden.

Foar wa't net wolle gean yn de programmearring en de ferzje fan de CSS-gids, der binne online redakteuren dy't generearje trijehoeken rjocht maten en kleuren. Yn de fisuele bewurker, de brûker kiest en Konfigurearret alle ynstellings figuer. Bekeard ta de CSS koade generator trijehoeke pleatst yn in apart finster op it fly. Dan, de oanmakke koade wurdt gewoan ynbrocht yn it stylblêd en te passen it ûntwerp fan de side.