Kuidas CSS kolmnurgad töötavad? Kuidas teha geomeetrilisi kujundeid KSS
Projekt ühendatud ühes huvitatud mind komistas huvitava näide Kuidas luua CSS kolmnurk. Ja kuna kolmnurgad on veebilehe elemendid pidevalt kasutanud, peame selle looma. See meetod on see märkus.
Googling Küsimus Kuidas teha CSS kolmnurk leidis mõned huvitavamad meetodid, kuid mulle meeldis näide projekti enam. See on vana ja pikka aega tuntud meetod. See põhineb selliste CSS-i omaduste kasutamisel piiri värvi ja piiri laiusena. Meetodi olemus on lihtne. Looge iga ploki (DIV) ja küsige temalt CSS-i omadusi piiri värvi ja piiri laiusest. Piirlaius vara paksus piiri ja saab neli väärtust. Paks piiri peal, paremale allpool, vasakul. Ma tuletan meelde, et selle CSS-i salvestamisel algavad loendamisomadused ülemisest piirist ja minna päripäeva. Seega, et luua kolmnurk meie plokk, kolmnurk on tippu piirilaiusega kinnisvara paigaldame ülemise piiri paksuse 0, vasakule ja paremale paksu ploki ja ploki plokis . Piiri värvi vara, ma arvan, et see on juba selgeks. See võtab ka ploki külgedel neli väärtust. Kui meil on kolmnurk valgel taustal, kõik piirid seavad valge, välja arvatud põhja. Noh, nüüd nagu tavaliselt. Kuna märkus osutus välja väga suur, otsustas CSS-ile animatsiooni kolmnurga juurde lisada.
Näide: animatsiooni jaoks hiire kolmnurga üle
Nagu näete, on kõik piisavalt lihtne. Sellise meetodi puudumist võib seostada, et kolmnurk ei suuda varjude ja ülejäänud kaunsuse seadistada. Kuid meetod on lihtne ja ristlõige. Kasutage seda projektides, et lahendada teid.
Üks väga sagedasi ülesandeid, mis tõusevad enne Vestjat joonistage kolmnurgad CSS-is. Näiteks võivad nad olla ümberpaigutamisel ja avamisel plokid, rippmenüüst mõned teised liidese elemendid. Ja selles artiklis näen ise optimaalsed valikud Kolmnurga joonis CSS-is.
1. viis
Lihtsa noolepildi loomine (Näiteks disainilahenduse lõikamine). See meetod ma ise kasutatakse pidevalt ja ma tean, et see on kõige populaarsem ja mõnel juhul ainus. Aga seal on suur miinus, kui te teete läbipaistvaid kohti kolmnurga, siis peate kasutama PNG., mis IE6 ei toeta. Ja kui te võtate Jpg.Sõltuvalt taustast peate võtma midagi või teist pilti. Tulemusena võib-olla 100 Samad nooled, kellel on erinev taust, lõpuks 100 Pildid.
2. tee
See meetod kasutab juba puhta CSS.See on väga lihtne, kuid ilusad nurgad (näiteks varjude, gradientidega, mõnede keerukate joonistega), mida te seda teete:
Kolmnurk (
Piiri värv: # 000 #fff #fffffff;
Piiri stiilis: tahke aine;
Piirlaius: 10PX 5PX 0 5PX;
Kõrgus: 0;
Laius: 0;
}
Tavalise ploki kõrval div Te saate klassi rakendada kolmnurkSelle tulemusena muutub see plokk mustaks nooleks ( #000 ). Mõõtmeid saab kohandada vara kaudu piiri laius.. Siin selle meetodi kohta paljud teist ei kuulnud isegi, nii et kui nool on lihtne, siis see on parim viis.
Muud meetodid
Aeg-ajalt olen ma nendega kohanud, aga ma ise ei kasuta neid, sest ükski neist ei ole ristlõige. Kõiki neid kasutatakse CSS3 ja / või HTML5Kes, Alas, on veel väga halvasti toetatud isegi kaasaegsed brauserid, kuid ei pea rääkima vana ja rääkida. Seetõttu soovitan teil kasutada sel hetkel Seni kõigepealt 2 Mood.
kolmnurk CSS-i insultiga (14)
transforts \u003d [("piiri vasakpoolne laius": "30", "marginaal-vasak": "70"), ("piiripõhine laius": "80"), ("Border-parempoolse laius": "30"), ("piiriülene laius": "0", "marginaal-top": "70"), ("laius": "0"), ("kõrgus": "0", "marginaal -top ":" 120 "), (" BorderlefTcolor ":" läbipaistev ") (" BorderIntrcolor ":" läbipaistev ")]; $ ("# A"). Klõpsake (funktsioon () ($ ("piir"). Trigger (klõpsa ");)); (Funktsioon ($) (var kestus \u003d $ 1000 (". Piiri"). Klõpsake (funktsioon () (var i \u003d 0; i< transforms.length; i++) {
$(this)
.animate(transforms[i], duration)
}
}).end()
}(jQuery))
.border {
margin: 20px 50px;
width: 50px;
height: 50px;
border-width: 50px;
border-style: solid;
border-top-color: green;
border-right-color: yellow;
border-bottom-color: red;
border-left-color: blue;
cursor: pointer
}
Klõpsake seda!
Juhuslik artikkel
/ ** * randomiseerida massiivi elementide tellimuse kohale. * Durstenfeldi Shuffle'i algoritmi kasutamine. * / Funktsioon Shufflearray (massiiv) (for (var i \u003d array.length - 1; i\u003e 0; i--) (VAR J \u003d Math.floor (Math.random () * (I + 1)); VAR temp \u003d Massiiv [i]; massiivi [i] \u003d massiiv [j]; massiivi [j] \u003d temp;) tagasipöördumise massiivi;) Transforms \u003d [("piiri vasakpoolne laius": "30", "marginaal-vasak": " "70"), ("Border-Bottom-laius": "80"), ("Border-parempoolne": "30"), ("piiriülene laius": "0", "marginaal-top ":" 70 "), (" laius ":" 0 "), (" kõrgus ":" 0 "), (" Borderleffcolor ":" läbipaistev "), (" BorderIntrightcolor ":" läbipaistev ")]; Muudab \u003d Shufflearray (Transfortable) $ ("# A"). Klõpsake (funktsioon () ($ (". Border"). Käivitus ("klikk");))); (Funktsioon ($) (var kestus \u003d $ 1000 (". Piiri"). Klõpsake (funktsioon () (var i \u003d 0; i< transforms.length; i++) {
$(this)
.animate(transforms[i], duration)
}
}).end()
}(jQuery))
.border {
margin: 50px;
width: 50px;
height: 50px;
border-width: 50px;
border-style: solid;
border-top-color: green;
border-right-color: yellow;
border-bottom-color: red;
border-left-color: blue;
cursor: pointer
}
Klõpsake seda!
Kõik kohe versioon
$ ("# A"). Klõpsake (funktsioon () ($ ("piir"). Trigger (klõpsa ");)); (Funktsioon ($) (var kestus \u003d $ 1000 (". Border"). Klõpsake (funktsioon () ($ () ($ () ($ ()) ("Border-Top-laius": 0) Piiri parempoolne laius: 30, "piiripõhine laius": 80, "laius": 0, "kõrgus": 0, "marginaal-vasak": 100, "marginaal-top": 150, "BorderTopcolor": "Läbipaistev", "BorderSrightColor": "Läbipaistev", "Piiriline": "Läbipaistev"), kestus)))) Laius: 50px; Border-stiilis: tahke aine; piiriülene värvus: roheline; piiri parempoolne värvus: kollane; piiripõhine värvus: punane; piiri vasakpoolse värviga: sinine; kursor: kursor
Klõpsake seda!
CSS kolmnurgad: tragöödia viies toimingus
Meil on kaks gradient G1 ja G2, sinine joon on div W laiuse ja iga gradient on 50% (w / 2) ja kolmnurga mõlemal küljel võib olla võrdne W-ga. Roheline joon on HG gradiendi kõrgus ja me saame hõlpsasti saada valemi alltoodud valemi:
(W / 2) ² + HG² \u003d W² ---\u003e Hg \u003d (SQRT (3) / 2) * W ---\u003e HG \u003d 0,866 * w
Me võime tugineda arvutile () täita meie arvutus ja saada vajalik tulemus:
Tri (--w: 100px; laius: var (- w); kõrgus: 100px; ekraan: inline-plokk; taustapildi: lineaarne gradient (alumisele paremale, läbipaistev 49,8%, punane 50%), lineaarne gradient (All vasakule, läbipaistev 49,8%, punane 50%); taustav suurus: Calc (var (- w) / 2 + 0,5%) arvutatud (0,866 * var (- w)); taustapositsioon: vasakule põhja, paremale Põhja; tausta kordus: no-kordus;)
Teine võimalus on kontrollida div ja see on lihtne salvestada gradiendi süntaks:
Tri (--w: 100px; laius: var (- w); kõrgus: arvutatud (0,866 * var (- w)); ekraan: inline-plokk; taust: lineaarne gradient (botto paremale, läbipaistev 49,8%, punane 50%) vasakule, lineaarne gradient (alla vasakule, läbipaistev 49,8%, punane 50%) õigus; taustav suurus: 50,2% 100%; tausta kordus: korrake;)
4) juhuslik kolmnurk
Et saada juhusliku kolmnurga, see on lihtne, sest me lihtsalt vaja eemaldada seisundi 50% iga neist, kuid me peame säilitama kaks tingimust (mõlemal peab olema sama kõrgus ja summa nii laiuse peaks olema 100% peaks olema 100% ).
TRI-1 (laius: 100px; kõrgus: 100px; Ekraan: inline-plokk; Punane 0); taustasuurus: 20% 60%, 80% 60%; taustapositsioon: vasakule põhja, parempoolne põhja; tausta kordus: mitte-kordus;)
Aga mis siis, kui me tahame iga poole väärtuse määrata? Me peame lihtsalt arvutuse uuesti tegema!
Me määratleme HG1 ja HG2, kuna meie gradiendi kõrgus (mõlemad on võrdsed punase joonega) ja seejärel WG1 ja WG2-d meie gradiendi laius (WG1 + WG2 \u003d a). Ma ei täpsusta arvutust, kuid lõpus on meil:
WG2 \u003d (A² + C²-B²) / (2A) WG1 \u003d A - WG2 HG1 \u003d HG2 \u003d SQRT (b² - WG1²) \u003d SQRT (C² - WG2²)
Nüüd oleme jõudnud CSS piiri, sest isegi Calc () me ei saa seda rakendada, nii et me lihtsalt vaja koguda lõpptulemus käsitsi ja kasutada neid fikseeritud suurusega:
boonus
Me ei tohiks unustada, et saame rakendada ka omakorda ja / või moonutusi ja meil on rohkem võimalusi suurema kolmnurga saamiseks:
Tri (--Wg1: 20px; --wg2: 60px; --hg: 30px; laius: Calc (var (- WG1) + var (- WG2)); kõrgus: 100px; ekraan: inline-plokk; taust -image : lineaarne gradient (alumise paremale, läbipaistev 50%, punane 0), lineaarne gradient (alumisele vasakule, läbipaistev 50%, punane 0); taustav suurus: var (- wg1) var (- hg), var ( - WG2) var (- Hg); taustapositsioon: vasakpoolne põhja, parem põhja; tausta kordus: no-kordus;)
Ja muidugi peame meeles pidama SVG lahendust, mis võib mõnes olukorras sobivam olla:
sVG (laius: 100px; kõrgus: 100px;) polügoon (täitke: punane;)
Teised on seda juba selgitanud. Las ma annan sulle animatsioon, mis selgitab seda kiiresti: http://codepen.io/chriscoyier/pen/lotjh
Siin on mingisugune mängu ja õppekontseptsioonide kood.
/ * Piiride laius on piiri paksus * / # Border-demo (taust: hall; Border-Värvus: kollane sinine punane roheline; / * Top parempoolne alumine vasakpoolne * / piiri stiilis: tahke aine; piirilaius: 25PX 25PX 25PX 25PX; / * Ülemine parem alumine vasakpoolne * / kõrgus: 50px; laius: 50px;)
Mängi selle ja vaata, mis juhtub. Paigaldage kõrgus ja laius nullil. Seejärel eemaldage ülemine piir ja tehke vasakule ja paremale läbipaistev või lihtsalt vaadata allolevat koodi CSS-kolmnurga loomiseks:
# Border-demo (piir vasakul: 50px tahke läbipaistev; piiri parempoolne: 50px tahke läbipaistev; piiripõhine: 100px tahke sinine;)
Mitmesugune lähenemine. Lineaarse gradiendiga (st ainult IE 10+). Võite kasutada mis tahes nurka:
Triangle (marginaal: 50px auto; laius: 100px; kõrgus: 100px; / * lineaarne gradient * / taust: -Moz-lineaarne gradient (-45deg, RGBA (255,0,0) 0%, RGBA (255, \\ t 0,0,0) 50%, RGBA (255,0,1) 50%, RGBA (255,0,0,1,1,0) 100%); / * FF3.6 + * / Taust: -Mebkit-gradient (lineaarne, vasakpoolne, parem põhja, värv-peatus (0%, RGBA (255,0,0,0,0)), värv-peatus (50%, RGBA (255,0,0,0) , 0)), värv-peatus (50%, RGBA (255,0,1)), värv-peatus (100%, RGBA (255,0,0,1))); / * Chrome, Safari4 + * / Taust: -Mebkit-lineaarne gradient (-45deg, RGBA (255,0,0,0,0) 0%, RGBA (255,0,0,0,0) 50%, RGBA (255,0, 0,1) 50%, RGBA (255,0, 0,1) 100%); / * Chrome10 +, Safari5.1 + * / Taust: -O-lineaarne gradient (-45deg, RGBA (255,0,0, 0,0) 0%, RGBA (255,0 0) 50%, RGBA (255,0,9,9) 50%, RGBA (255,0,1) 100%); / * Opera 11.10 + * / Taust: -Ms-lineaarne gradient (- 45deg, RGBA (255,0,0,0,0) 0%, RGBA (255.0.0.0.0.0) 50%, RGBA (255,0,0,1 ) 50%, RGBA (255,0,0,1) 100%); / * IE10 + * / Taust: lineaarne gradient (135deg, Rgba (255,0,0,0,0) 0%, RGBA (255,0,0,0) 50%, RGBA (255.0, 0,1) 50%, RGBA (255,0,1) 100%); / * W 3c * /; )
Alusta peaväljakust ja piiridest. Igal piiril on veel üks värv, nii et me saame neile eraldi öelda:
Kolmnurk (piirvärv: kollane sinine punane roheline; piiri stiilis: tahke; piiri laiusega: 200PX 200PX 200PX 200PX; kõrgus: 0px; laius: 0px;)
Kuid ülempiiri ei ole, nii et installige oma 0px laius. Nüüd meie 200px teeb meie 200px kolmnurk kõrge.
Kolmnurk (piirvärv: kollane sinine punane roheline; piiri stiilis: tahke; piirilaius: 0PX 200PX 200PX 200PX; kõrgus: 0px; laius: 0px;)
Seejärel seadistage kahekülje kolmnurga peitmiseks raami läbipaistvuse. Kuna ülemine piir on tõhusalt eemaldatud, saame luua ka piiri läbipaistvuse ülemise värvi.
Kolmnurk (piiri värv: läbipaistev läbipaistev punane läbipaistev; piiri stiilis: tahke; piiri laius: 0PX 200PX 200PX 200PX; kõrgus: 0px; laius: 0px;)
Mõtle kolmnurga all
Kolmnurk (piiri põhja: 15px tahke # 000; piir vasakpoolne: 10px tahke läbipaistev; Piirjas - parempoolne: 10px tahke läbipaistev; laius: 0; kõrgus: 0;
Seda me oleme antud:
Miks see selles vormis töötas välja? Allolev diagramm selgitab suurust, pange tähele, et alumise piiri puhul kasutati 15PX ja vasakult ja paremale kasutati 10PX.
Ristkülikukujulise kolmnurga tegemist on väga lihtne teha õige piiri eemaldamine.
Ja nüüd midagi täiesti erinevat ...
CSS-trikke kasutamise asemel ärge unustage lahendusi nii lihtne kui HTML-objektid:
▲Piirikud kasutavad nurgarva, kus nad lõikuvad (45 ° nurk võrdsete laiustega, kuid piiri laiuse muutus võib moonutada nurka).
Teatud piiride peitmine, saate kolmnurga mõju saada (nagu te näete ülalpool, tehes erinevaid värve erinevate osade). Kolmnurga kuju saavutamiseks kasutatakse sageli läbipaistvat värvi.
siin on veel üks viiul:
Konteiner: Pärast (positsiooni: absoluutne; õige: 0; Sisu: ""; marginaal-parempoolne: -50px; marginaali allosas: -8px; piirilaius: 25px; piiri stiilis: tahke aine; Piirivärv: läbipaistev läbipaistev # 000; laius: 0; kõrgus: 0; z-indeks: 10; -Webkit-üleminek: nähtavus 50 mS-i lihtsus, läbipaistmatus 50 mS-i lihtsus; üleminek: nähtavus 50 mS lihtsus-välja, läbipaistmatus 50 ms Kerniga; põhja: 21px;) .Container (float: vasakul; marginaal-top: 100px; positsioon: suhteline; laius: 150px; kõrgus: 80px; taustav värv: # 000;) : Vasak; marginaal-top: 100px; asend: sugulane; laius: 100px; kõrgus: 80px; taustvärv: punane;)
Mitmesugune lähenemine:
CSS3 kolmnurgad Pöörlemise pööramisega
Kolmepoolse vormi on selle tehnikaga üsna lihtne teha. Inimestele, kes eelistavad näha animatsiooni selgitades, kuidas see tehnika siin töötab, ta:
- Link Animatsioon: kuidas luua kolmnurga CSS3 .
- Ja Demo: kolmnurgad CSS3, Tehtud ümberkujundamisega.
Vastasel juhul on 4 toiminguga üksikasjalik selgitus (see ei ole tragöödia) selle kohta, kuidas teha võrdselt juhitud ristkülikukujulise kolmnurga ühe elemendiga.
- Märkus 1: Mitte-võrdsete kolmnurkade ja veider asju, mida näete 4. sammu .
- Märkus 2: Järgmistes fragmentides ei kuulu tarnija eesliiteid. need on kaasatud CodePen deemonitesse .
- Märkus 3: HTML järgmise selgituse jaoks on alati:
SAMM 1: Div
Lihtne, lihtsalt veenduge, et laius \u003d 1,41 x kõrgus. Te saate kasutada iga tehnikat (), sealhulgas huvipakkuvate väärtuste ja polsterdamise alumise kasutamist osapoolte ja loomise säilitamiseks paindlik kolmnurk . Kohta järgmine pilt Div on kuldne kollane piir.
Selles DIV-i sisestamisel pseudo-element Ja anna see 100% laiuse ja vanema elemendi kõrgus. Pseudo-elemendil on sinine taust järgmises pildis.
CSS. :
TR (laius: 30%; polster-alt: 21,27%; / * \u003d laius / laius / 1,41 * / positsioon: suhteline;) .tr: enne (sisu: ""; positsioon: Absoluutne; Üles: 0; laius : 100%; kõrgus: 100%; taust: # 0079c6;)
Samm 2: Pöördume
Esiteks, kõige olulisem asi: määrake ümberkujundamise päritolu . Vaikimisi on päritolu pseudoelemendi keskel ja me vajame seda alumises vasakus nurgas. Selle lisamisega CSS. Pseudo-elemendis:
transformatsiooni päritolu: 0 100%; või transformatsiooni päritolu: vasakule põhja;
Nüüd saame pöörata transformatsiooni: pöörata (45deg); 45 kraadi päripäeva transformatsiooni: pöörata (45DEG);
Praegu meil on see CSS. :
TR (laius: 30%; polster-alt: 21,27%; / * \u003d laius / laius / 1,41 * / positsioon: suhteline;) .tr: enne (sisu: ""; positsioon: Absoluutne; Üles: 0; laius : 100%; kõrgus: 100%; taust: # 0079c6; transformatsiooni-päritolu: 0 100%; transformatsioon: pöörleb (45deg);)
3. samm: peida see
Pseudo-elemendi soovimatute tükkide varjamiseks (kõik, mis ületab kollase raamiga div), peate lihtsalt installima ülevoolu: peidetud; konteineril. Pärast kollase piiri eemaldamist saad ... Kolmnurk ! :
Tr (laius: 30%; polsterdamise allosas: 21,27%; / * \u003d laius / 1,41 * / positsioon: sugulane; ülevool: peidetud;) .tr: enne (sisu: "; Asukoht: Absoluutne; Üles: 0; Vasak: 0; laius: 100%; kõrgus: 100%; taustvärv: # 0079c6; transformatsiooni päritolu: 0 100%; transformatsioon: pöörake (45DEG);)
Samm 4: Mine edasi ...
Olles teinud veel ühe sammu, kasutades CSS-i põhjal, lisasin mulle nooled ja järgmised nupud (jah, ma tean, et see ei ole 100% rist brauser, vaid siiski kohapeal).
Kolmnurk (laius: 0; kõrgus: 0; Piiri vasakul: 50px tahke läbipaistev; Piirjas: 50px tahke läbipaistev; piiripõhine: 100px tahke punane; marginaal: 20px auto;) .trianurk (Border-Bottom: Puudub Piiripliiri: 100px tahke punane;) .triagle-vasakule (Piirjas vasakul: ükski; Piirjaga: 100px tahke punane; piiripõhine: 50px tahke läbipaistev; piiriülene: 50px tahke läbipaistev;) .triaga-parempoolne (Piirjaga: Puudub; Piiri vasakul: 100px tahke punane; piiripõhine: 50px tahke läbipaistev; piiriülene: 50px tahke läbipaistev;) .triagle-pärast: pärast (laius: 0; kõrgus: 0; : 5px tahke läbipaistev; piiri parempoolne: 5px tahke läbipaistev; piiripõhine: 5px tahke punane; marginaal: 0 5px; Sisu: ""; ekraan: inline-plokk;) .triagle-paremale: pärast (piiriaja: Puudub; piir vasakpoolne: 5px tahke sinine; piiripõhja: 5px tahke läbipaistev; piiriülene: 5px tahke läbipaistev;) .triagle-enne: enne (laius: 0; kõrgus: 0; Piiri paremale: 5px nii Kaane läbipaistev; Piiri põhja: 5px tahke sinine; Marginaal: 0 5px; Sisu: ""; Ekraan: Inline-plokk; ) Kolmnurk-enne vasakpoolne: enne; Piirivaid: 5px tahke sinine; piiripõhine: 5px tahke läbipaistev; piiri: 5px tahke läbipaistev;
Tagasi.Paljud on kuulnud, et saate CSS-is kolmnurgad teha. Selleks on suurepärase hack piiriülese varaga, mida saab kasutada kolmnurkade tegemiseks CSS-i ilma ühe pildita.
Kuidas teha kolmnurgad CSS-is
Kuidas teil on vaja kuvada brauseri piirid, kui kõik piirid on läbipaistev värv (see tähendab, et neid ei ole) ja üks (näiteks alumine) piir \u003d 10px ja on olemas värv? Midagi vilgutas? Õige! See pääseb ülejäänud piirid järk-järgult ühes punktis. Ei ole loogiline, kuid see on :)
See tähendab, et kui täpsustate ühe piiri \u003d kolmnurga soovitud kõrgus ja ülejäänud piirid on läbipaistev värviga, siis saame kolmnurga, seda saab selle võrdse ja isocee-free kolmnurga. Kolmnurk on suunatud piiripunkti vastandlikule vastupidisele. Kui määrate õige piiri, siis saad vasakule noolt, ülemine piir on alla. Jne.
Kaaluge koodi näites CSS-i kolmnurkaid
Piir: 30px tahke läbipaistev; / * Läbipaistvad piirid * / Piiripeal: 30PX tahke roheline; / * Lisa kolmnurk * / laius: 60px; Kõrgus: 60PX;See näeb välja selline.