Sut mae triongl CSS: ffyrdd mwyaf cyfleus

Yn aml iawn, tudalennau gwe modern hardd yn cynnwys llawer o graffeg deniadol. Yn eu plith mae'r symlaf defnyddio siâp geometrig megis triongl, a ddefnyddir i ddylunio lluosogrwydd o elfennau. Er enghraifft, maent yn cael eu defnyddio fel pwyntydd i wrthrych ar y dudalen i'r ymwelydd yn troi ei sylw ato. Wrth gwrs, y prif swyddogaeth y triongl - sef addurniadol, fel blociau sy'n eu cynnwys, yn dod yn fwy modern a deniadol.

Nid yw pawb yn gwybod sut i greu ffigwr o'r fath trwy Cascading Style Sheets, ac yn meddwl sut i wneud triongl yn CSS.

Cais wrth ddylunio safleoedd

Mewn trionglau dylunio gwe ym mhob man. Maent yn cael eu gwneud allan awgrymiadau, bwydlenni, elfennau amrywiol UI. Weithiau maent yn cael eu defnyddio i greu dangosydd o'r broses lesewch. Ac os yn gynt oedd modd gwneud hebddynt, ond erbyn hyn nid oes modd, ac mae'n ofynnol i'r datblygwyr i addasu i ofynion o'r fath. Wedi'r cyfan, heddiw a grëwyd yn triongl CSS - rhan bwysig yn y gwaith o adeiladu'r rhyng-gysylltiad rhwng y rhannau o'r rhyngwyneb ac yn uno i mewn i un endid.

Mae llawer o dylunwyr gwe yn penbleth pan ddaw at y gosodiad, dyluniad sydd yn aml iawn yn trionglau. Wedi'r cyfan, nid oes unrhyw eiddo sydd yn creu y ffigur geometrig hyn yn uniongyrchol. Yn wir, mae yna ddulliau lluosog i wneud hyn.

Dull o greu ffrâm gan ddefnyddio

Y dull cyntaf yn eich galluogi i greu triongl yn y CSS - ffin. Ef yw ddefnyddio fframiau. Er gwaethaf y ffaith nad oedd y ffiniau sy'n cael eu creu drwy ddefnyddio'r eiddo ffin yn uniongyrchol gysylltiedig â'r triongl, mae'n cael ei ddefnyddio fwyaf aml at y diben hwn.

Wrth osod y sero uchder a lled y gwrthrych, yn ogystal â gosod border trwchus, gallwch weld y sgwâr, sy'n cael ei rhannu'n bedwar triongl cyfartal. Y gamp yw bod angen i chi gadw dim ond y ffin angenrheidiol, a'r lleill i wneud yn dryloyw. Ac yn awr, mae'n troi allan triongl dynnu yn y cyfeiriad cywir CSS a lliw.

Creu onglau gan ddefnyddio priodweddau "ffrâm" yn gyfleus oherwydd nad oes angen tynnu lluniau gan ddefnyddio unrhyw olygu. Gall paramedrau triongl bob amser yn cael ei newid yn y cod. Ac mae'n arbed amser datblygwr. Trwy gyfuno lled gwahanol y ffrâm yw'n ddigon i gael y ffigur yn hawdd. Er mwyn deall sut y mae'n gweithio, gallwch greu elfen gwag gyda sero lled, uchder, a ffrâm trwchus iawn liw gwahanol ar bob ochr. Felly, gan wneud y tair ochr y triongl pedwar tryloyw o wahanol fathau:

• triongl, gan edrych i'r chwith, ochrau ohonynt yn gyfartal;
• triongl, edrych yn chwith a gwastad;
• triongl hirgul, wynebu'r chwith;
• triongl ongl, y mae ei chwith i'r ongl sgwâr;
• triongl yn edrych tuag i lawr;
• triongl yn edrych i fyny;
• triongl, gan edrych i'r chwith, a llawer o rywogaethau eraill.

Defnyddio psevdoedementov

Gyda'r technegau hyn, gallwch greu onglau yn y cyfarwyddiadau ac awgrymiadau pop-up. I atodi drwy triongl CSS i'r uned, yn bennaf rhaglenwyr defnyddio fel ffug-ôl a blaen. Os ydych yn eu defnyddio gyda'i gilydd, mae'n bosibl tynnu yn y triongl CSS gael strôc.

Trwy eu cyfuno, mae'r datblygwyr yn creu amrywiaeth o saethwr hardd, cymhwyso eiddo safle: perthynas â'r elfen rhiant. Gwneir hyn er mwyn ffug-nid symud allan o'u seddau.

Byd Gwaith yn defnyddio fframwaith CSS ar gyfer creu trionglau yw:

• golygu cyflym a hawdd o feintiau a lliwiau gyda chymorth eiddo;
• cefnogi pob borwyr.

anfanteision:

• oherwydd ei fod yn defnyddio y ffrâm, nid oes unrhyw bosibilrwydd i wneud cais graddiant, cysgodion;
• Weithiau, pan fydd y defnyddiwr yn edrych ar y dudalen o Firefox borydd, mae'r gwerth alffa efallai na gweithio, a bydd hyn yn ystumio'r ddelwedd.

Gan ddefnyddio lluniau parod

Mae'r dull canlynol o greu trionglau - yw'r defnydd o ddelweddau amgodio. Mae'r triongl Tynnir ymlaen llaw mewn golygydd delwedd a trosi i god arbennig gyda gwasanaethau arbenigol.

Mantais y dull hwn yw y gallwch wneud dyluniad hardd iawn gyda chysgodion, graddiant, a ffrâm ac yna dim ond amgodio y cyfan. Ond mae'r anfantais yw y ffaith nad yw pawb yn rhugl mewn rhaglenni graffeg. Yn ogystal, os yw'r ddelwedd yn fawr iawn, y llinell o cod yn cael ei sicrhau gan syml enfawr. Mae hyn yn anghyfleus i'r datblygwr.

Mae eitem ar wahân yn werth defnyddio porwyr Internert Explorer hen fersiynau. Ynddynt, mae'r dull yn syml, nid yw'n gweithio.

Dull sgwâr gwrthdro

Un ffordd yw creu ffordd o CSS inverted sgwâr. Mae dau uned sylfaenol. Ond mae rhai pobl yn defnyddio ffug.

Yn gyntaf, byddwch yn creu sgwâr. Bydd yn cynnwys yr aelod cylchdroi. Yna defnyddio erbyn 45 gradd, fel ei fod yn edrych fel diemwnt. Nesaf, y newid i fyny ac uned allanol yn cael ei guddio gan y gorlif eiddo: cudd. Mae hyn yn ateb nid hefyd yn traws-porwr, ac weithiau nid yw'r darlun yn cael ei arddangos fel y dymunir.

canlyniadau

Felly, mae llawer o ddulliau i greu triongl. Dim ond nid yw'n mynd ar goll yn yr holl eiddo CSS hyn? Cyfeirnod yr achos hwn bydd bob amser yn help. Mae'n disgrifio yr holl nodweddion o Daflenni Arddull Rhaeadrol.

Ar gyfer y rhai nad ydynt am i fynd i mewn i raglennu a gweld y CSS-canllaw, mae golygyddion ar-lein sy'n cynhyrchu trionglau maint a lliw cywir. Yn y golygydd gweledol, y defnyddiwr yn dewis ac yn ffurfweddu pob ffigur lleoliad. Troswyd i'r cod CSS triongl generadur gosod mewn ffenestr ar wahân ar y hedfan. Yna, mae'r cod a gynhyrchir yn cael ei fewnosod yn syml i mewn i'r arddull ac i gyd-fynd â'r dyluniad y dudalen.