Css kā izveidot trīsstūra pogas. Kā darbojas CSS trīsstūri? CSS3 trīsstūri ar rotācijas rotāciju

trīsstūris ar gājienu css (14)

transforms = [("border-left-width" :"30", "margin-left": "70"), ("border-bottom-width" :"80"), ("border-left-width" : "30"), ("border-top-width" :"0", "margin-top": "70"), ("width" :"0"), ("height" :"0", "margin" -augšā": "120"), ("borderLeftColor" :"caurspīdīgs"), ("borderRightColor" :"caurspīdīgs" ]); $("#a").click(function() ($(.border").trigger("klikšķis");)); (funkcija($) ( var ilgums = 1000 $(.border").click(function() ( for (var i=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 } Click it!

Nejaušs raksts

/** * Nejaušināta masīva elementu secība. * Izmantojot Durstenfelda jaukšanas algoritmu. */ funkcija shuffleArray(masīvs) ( for (var i = array.length - 1; i > 0; i--) ( var j = Math.floor(Math.random() * (i + 1)); var temp = masīvs[i] masīvs[j] = temp ) pārveido = [ ("border-left-width" :"30", "margin-left": "70"; bottom-width" :"80"), ("border-right-width" :"30"), ("border-top-width" :"0", "margin-top ": "70"), (" platums" :"0"), ("augstums" :"0"), ("borderLeftColor" :"caurspīdīgs"), ("borderRightColor" :"caurspīdīgs") ]); transforms = shuffleArray(transforms) $("#a").click(function() ($(.border").trigger("klikšķis");)); (funkcija($) ( var ilgums = 1000 $(.border").click(function() ( for (var i=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 } Click it!

Visu uzreiz versija

$("#a").click(function() ($(.border").trigger("klikšķis");)); (funkcija($) ( var ilgums = 1000 $(.border").click(function() ( $(this).animate(("border-top-width": 0 , "border-left-width": 30, "apmales-labās platums": 30, "apmale-apakšējā platums": 80, "platums": 0, "augstums": 0, "margin-left": 100, "margin-top": 150, "borderTopColor": "caurspīdīgs", "borderRightColor": "caurspīdīgs", "borderLeftColor": "caurspīdīgs", ilgums) )).end() )(jQuery)).apmale (mala: 50px; platums: 50px; augstums : 50px border-width: 50px border-down-color: green ) Noklikšķiniet uz tā;

CSS trīsstūri: traģēdija piecos cēlienos

Mums ir divi gradienti g1 un g2 , zilā līnija ir divdaļas w platums, un katram gradientam būs 50% (w/2), un katra trijstūra mala var būt vienāda ar w . Zaļā līnija ir gradienta augstums hg, un mēs varam viegli iegūt zemāk esošo formulu:

(w/2)² + hg² = w² ---> hg = (sqrt(3)/2) * w ---> hg = 0,866 * w

Mēs varam paļauties uz calc (), lai veiktu aprēķinus un iegūtu vajadzīgo rezultātu:

Tri (--w:100px; platums:var(--w); augstums:100px; displejs:inline-block; fona attēls: lineārs gradients (apakšējā labajā pusē, caurspīdīgs 49,8%, sarkans 50%), lineārs- gradients(apakšā pa kreisi, caurspīdīgs 49,8%,sarkans 50%):calc(var(--w)/2 + 0,5%) calc(0,866 * var(--w)); background-repeat:no-repeat;

Vēl viens veids ir kontrolēt div augstumu un nodrošināt vienkāršu gradienta sintaksi:

Tri ( --w:100px; platums:var(--w); augstums:calc(0,866 * var(--w)); displejs:inline-block; fons: lineārs gradients (apakšā pa labi, caurspīdīgs 49,8% ,sarkans 50%) pa kreisi, lineārs gradients (uz leju pa kreisi, caurspīdīgs 49,8%, sarkans 50%) pa labi;

4) Nejaušs trīsstūris

Lai iegūtu nejaušu trīsstūri, tas ir vienkārši, jo mums vienkārši ir jānoņem katra nosacījuma 50%, taču mums ir jāsaglabā abi nosacījumi (abiem jābūt vienādam augstumam, un abu platumu summai ir jābūt 100%).

Tri-1 (platums: 100 pikseļi; augstums: 100 pikseļi; displejs: iekļauts bloks; fona attēls: lineārs gradients (apakšējā labajā pusē, caurspīdīgs 50%, sarkans 0), lineārs gradients (apakšā pa kreisi, caurspīdīgs 50%, sarkans 0);

Bet ko darīt, ja mēs vēlamies definēt vērtību katrai pusei? Mums tikai jāveic aprēķins vēlreiz!

Definēsim hg1 un hg2 kā mūsu gradienta augstumu (abi ir vienādi ar sarkano līniju), un pēc tam wg1 un wg2 kā mūsu gradienta platumu (wg1 + wg2 = a). Es neaprakstīšu aprēķinu, bet beigās mums būs:

Wg2 = (a²+c²-b²)/(2a) wg1 = a - wg2 hg1 = hg2 = kvadrāts (b² - wg1²) = kvadrāts (c² - wg2²)

Tagad mēs esam sasnieguši CSS ierobežojumu, jo pat ar calc() mēs to nevarēsim ieviest, tāpēc mums vienkārši jāsamontē gala rezultāts manuāli un jāizmanto kā fiksēts izmērs:

bonuss

Mēs nedrīkstam aizmirst, ka mēs varam izmantot arī rotāciju un/vai šķībumu, un mums ir vairāk iespēju iegūt lielāku trīsstūri:

Tri ( --wg1: 20px; --wg2: 60px; --hg:30px; platums:calc(var(--wg1) + var(--wg2)); augstums: 100px; displejs: inline-block; fons -attēls: lineārs gradients (apakšā pa labi, caurspīdīgs 50%, sarkans 0), lineārs gradients (apakšā pa kreisi, caurspīdīgs 50%, sarkans 0): var(--wg1) var(--hg). ) ),var(--wg2) var(--hg): pa kreisi apakšā, pa labi apakšā: no-repeat;

Un, protams, mums jāpatur prātā SVG risinājums, kas dažās situācijās var būt piemērotāks:

svg ( platums: 100 pikseļi; augstums: 100 pikseļi; ) daudzstūris ( aizpildījums: sarkans; )

Citi jau to ir labi izskaidrojuši. Ļaujiet man sniegt jums animāciju, kas to ātri izskaidros: http://codepen.io/chriscoyier/pen/lotjh

Šeit ir daži kodi, lai jūs varētu spēlēt un apgūt jēdzienus.

/*border-width ir apmales biezums*/ #border-demo (fons: pelēks; apmales krāsa: dzelteni zili sarkans zaļš;/*augšējā labajā apakšējā kreisajā ;/*augšējā labā apakšējā kreisā*/ augstums: 50px platums: 50px;

Spēlējiet ar to un skatieties, kas notiek. Iestatiet augstumu un platumu uz nulli. Pēc tam noņemiet augšējo apmali un padariet kreiso un labo malu caurspīdīgu vai vienkārši skatiet tālāk redzamo kodu, lai izveidotu css trīsstūri:

#border-demo (mala-kreisā: 50 pikseļi vienkrāsains caurspīdīgs; apmale-labais: 50 pikseļi vienkrāsains caurspīdīgs; apmale apakšā: 100 pikseļi vienkrāsains zils; )

Atšķirīga pieeja. Ar lineāro gradientu (tikai IE, IE 10+). Varat izmantot jebkuru leņķi:

Trīsstūris ( piemale: 50 pikseļi automātiski; platums: 100 pikseļi; augstums: 100 pikseļi; /* lineārs gradients */ fons: -moz-linear-gradient(-45°, rgba(255,0,0,0) 0%, rgba(255, 0,0,0) 50%, rgba(255,0,0,1) 50%, rgba(255,0,0,1) 100%) /* FF3.6+ */ fons: -webkit-gradient ( lineārs, pa kreisi augšā, pa labi apakšā, krāsu apturēšana (0%, rgba (255,0,0,0)), krāsu apturēšana (50%, rgba (255,0,0,0)), krāsu apturēšana ( 50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,1))) /* Chrome,Safari4+ */ fons: -webkit-linear- gradient (-45°, rgba(255,0,0,0) 0%, rgba(255,0,0,0) 50%, rgba(255,0,0,1) 50%, rgba(255,0, 0 ,1) 100% 0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%) /* Opera 11.10+ */ fons: -ms-linear-gradient(- 45deg); , rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100% ,1) 50%,rgba(255,0,0,1) 100% /* W3C */; )

Sāciet ar galveno laukumu un apmalēm. Katrai apmalei būs atšķirīga krāsa, tāpēc mēs varam tās norādīt atsevišķi:

Trīsstūris (apmales krāsa: dzelteni zila sarkana zaļa; apmales stils: vienkrāsains; apmales platums: 200 pikseļi 200 pikseļi 200 pikseļi 200 pikseļi; augstums: 0 pikseļi; platums: 0 pikseļi; )

Bet nav augšējās apmales, tāpēc iestatiet tās platumu uz 0 pikseļi . Tagad mūsu 200 pikseļi padarīs mūsu trīsstūri 200 pikseļus garu.

Trīsstūris (apmales krāsa: dzelteni zili sarkani zaļa; apmales stils: vienkrāsains; apmales platums: 0 pikseļi 200 pikseļi 200 pikseļi 200 pikseļi; augstums: 0 pikseļi; platums: 0 pikseļi; )

Pēc tam, lai paslēptu divus sānu trīsstūrus, iestatiet rāmja necaurredzamību. Tā kā augšējā apmale ir efektīvi noņemta, mēs varam arī iestatīt apmales caurspīdīgumu uz augšējo krāsu.

Trīsstūris (apmales krāsa: caurspīdīga caurspīdīga sarkana caurspīdīga; apmales stils: vienkrāsains; apmales platums: 0 pikseļi 200 pikseļi 200 pikseļi 200 pikseļi; augstums: 0 pikseļi; platums: 0 pikseļi; )

Apsveriet tālāk redzamo trīsstūri

Trīsstūris ( apmale-apakšējā: 15 pikseļi, vienkrāsains # 000; apmale-kreisais: 10 pikseļi vienkrāsains, caurspīdīgs; apmale-labais: 10 pikseļi vienkrāsains caurspīdīgs; platums: 0; augstums: 0; )

Tas ir tas, kas mums tiek dots:

Kāpēc tas iznāca šādā formā? Tālāk redzamajā diagrammā ir izskaidroti izmēri, ņemiet vērā, ka apakšējā apmalei tika izmantoti 15 pikseļi, bet kreisajai un labajai apmalei — 10 pikseļi.

Ir ļoti vienkārši izveidot taisnleņķa trīsstūri, noņemot arī labo apmali.

Un tagad kaut kas pavisam cits...

Tā vietā, lai izmantotu css trikus, neaizmirstiet par tādiem vienkāršiem risinājumiem kā html objekti:

▲

Apmales izmanto stūra malu, kur tās krustojas (45° leņķis ar vienādiem platumiem, bet apmales platuma maiņa var izkropļot leņķi).

Paslēpjot noteiktas apmales, jūs varat iegūt trīsstūra efektu (kā redzat iepriekš, veidojot dažādas daļas dažādās krāsās). caurspīdīgu bieži izmanto kā malu krāsu, lai sasniegtu trīsstūra formu.

šeit ir vēl viena vijole:

Konteiners: pēc ( pozīcija: absolūta; pa labi: 0; saturs: ""; mala pa labi: -50 pikseļi; mala apakšdaļa: -8 pikseļi; apmales platums: 25 pikseļi; apmales stils: vienkrāsains; apmales krāsa: caurspīdīga, caurspīdīga, caurspīdīga #000: z-indekss: 10; margin-top: 100px; platums: 150px.

Atšķirīga pieeja:

CSS3 trīsstūri ar rotācijas rotāciju

Trīsstūrveida formu ir diezgan viegli izgatavot, izmantojot šo tehniku. Cilvēkiem, kuri vēlas redzēt animāciju, kurā paskaidrots, kā šī tehnika darbojas, tas ir:

Saite uz ANIMĀCIJU: Kā izveidot trīsstūri CSS3 .
UN DEMO: trijstūri CSS3, izgatavots ar transformācijas pagriešanu.

Pretējā gadījumā šeit ir detalizēts skaidrojums 4 soļos (tā nav traģēdija) par to, kā izveidot vienādsānu taisnstūri ar vienu elementu.

1. piezīme. Neviensānu trijstūriem un smalkām lietām varat skatīt 4. darbību .
2. piezīme. Pārdevēja prefiksi nav iekļauti tālāk norādītajos fragmentos. tie ir iekļauti codepen dēmonos .
3. piezīme. HTML kods šādam skaidrojumam vienmēr ir:

1. SOLIS: izveidojiet div

Vienkārši, pārliecinieties, ka platums = 1,41 x augstums. Varat izmantot jebkuru paņēmienu (), tostarp izmantot procentus un apakšējo daļu, lai saglabātu malu attiecību un izveidotu elastīgu trīsstūri. Nākamajā attēlā dimensijai ir zeltaini dzeltena apmale.

Šajā div sadaļā ievietojiet pseidoelementu un piešķiriet tam 100% vecāku elementa platumu un augstumu. Nākamajā attēlā pseido elementam ir zils fons.

CSS :

Tr ( platums: 30%; polsterējums apakšā: 21,27%; /* = platums / 1,41 */ pozīcija: relatīvs; ) .tr: pirms ( saturs: ""; pozīcija: absolūtā; augšā: 0; pa kreisi: 0; platums : 100% augstums: 100%: #0079C6;

2. SOLIS: pagriezīsimies

Pirmkārt, vissvarīgākā lieta: noteikt transformācijas izcelsmi. Pēc noklusējuma izcelsme atrodas pseidoelementa centrā, un mēs to vēlamies apakšējā kreisajā stūrī. Pievienojot šo CSS uz pseido elementu:

transformācijas izcelsme:0 100%; vai transformācijas izcelsme: pa kreisi apakšā;

Tagad mēs varam pagriezt transformāciju: pagriezt (45°); 45 grādi pulksteņrādītāja virzienā ar transformāciju: pagriezt (45grādi);

Šobrīd mums tāds ir CSS :

Tr ( platums: 30%; polsterējums apakšā: 21,27%; /* = platums / 1,41 */ pozīcija: relatīvs; ) .tr:before ( saturs: ""; pozīcija: absolūtā; augšā: 0; pa kreisi: 0; platums : 100% augstums: 100% pārveido-izcelsme: 0 100%;

3. SOLIS: paslēpiet to

Lai paslēptu nevēlamās pseidoelementa daļas (visu, kas pārpilda div ar dzelteno apmali), jums vienkārši jāiestata overflow:hidden; uz konteinera. pēc dzeltenās apmales noņemšanas iegūsiet... Trijstūris ! :

Tr ( platums: 30%; polsterējums apakšā: 21,27%; /* = platums / 1,41 */ pozīcija: relatīva; pārplūde: paslēpta; ) .tr:before ( saturs: ""; pozīcija: absolūts; augšā: 0; pa kreisi : 0 platums: 100% pārveido-izcelsme: 0 100%;

4. SOLIS: turpiniet...

Veicot soli tālāk, izmantojot css, pamatojoties uz šo, es pievienoju bultiņas manai aizmugurē un tālāk norādītajām pogām (jā, es zinu, ka tā nav 100% pārrobežu pārlūkprogramma, bet tomēr vieta).

Trīsstūris (platums: 0; augstums: 0; apmale-kreisā: 50 pikseļi, caurspīdīga; apmale-labā: 50 pikseļi viendabīgi caurspīdīga; apmale-apakšā: 100 pikseļi vienkrāsains sarkans; mala: 20 pikseļi automātiski; ) .triangle-down ( apmale-down: nav ; apmale-top: 100px solid red; .triangle-left (border-left:none; border-down: 100px solid red; border-down: 50px solid clear; ) .triangle-right ( apmale-labā: nav; apmale-kreisā: 100 pikseļi vienkrāsains sarkans; apmale-apakšā: 50 pikseļi, caurspīdīgs 5 pikseļi, caurspīdīgi, caurspīdīgi: 5 px ; apmale-apakšā: 5 pikseļi vienkrāsains zils; piemale: 0 5 pikseļi; saturs:""; displejs: inline-block; ) .trijstūris-pirms-kreisais:pirms ( mala-kreisais:nav; apmale-labais: 5px viendabīgi zils; apmale-apakšā: 5px vienkrāsains caurspīdīgs; apmale-augšs: 5px vienkrāsains caurspīdīgs; ) Atpakaļ Nākamais

Pētot projektu, kas mani interesēja, es uzgāju interesantu piemēru, kā izveidot trīsstūri CSS. Un tā kā trīsstūri ir kļuvuši par pastāvīgi izmantotiem tīmekļa lapas elementiem, mums ir jāspēj tos izveidot. Šī piezīme būs par šo metodi.

Googlējoties uz jautājumu, kā izveidot trijstūri css, atradu vēl vairākas interesantas metodes, bet man vairāk patika piemērs no projekta. Šī metode ir sena un labi zināma. Tas ir balstīts uz CSS rekvizītu izmantošanu, piemēram, apmales krāsu un apmales platumu. Metodes būtība ir vienkārša. Mēs izveidojam dažus blokus (div) un piešķiram tam css rekvizītus border-color un border-width . Rekvizīts border-width norāda apmales platumu, un tam ir četras vērtības. Apmales biezums augšā, pa labi, apakšā, pa kreisi. Atgādināšu, ka, rakstot šo css rekvizītu, atpakaļskaitīšana sākas no augšējās robežas un iet pulksteņrādītāja virzienā. Tādējādi, lai izveidotu trīsstūri ar augšpusi uz augšu no mūsu bloka, rekvizītā border-width augšējo apmali ierakstīsim ar biezumu 0, kreiso un labo apmali ar pusbloka biezumu un apakšējo ar bloka biezums. Manuprāt, tas pats jau ir kļuvis skaidrs ar apmales krāsas īpašību. Tas aizņem arī četras vērtības bloka malās. Ja mums ir trīsstūris uz balta fona, iestatiet visas apmales baltas, izņemot apakšējo. Nu, tagad, kā parasti, piemērs. Tā kā zīmīte nebija īpaši liela, nolēmu trīsstūrim pievienot CSS animāciju.

.trianglebox(platums: 200px; augstums: 110px; apmale: 1px solid #000; polsterējums-augš: 25px; margin: 0 auto; ) .triangle(marža: 0 automātiski; platums: 0px; augstums: 0px; apmales stils: solid /*trijstūra css*/ border-color: #fff #fff #fff: 0px 25px 25px /*animācijai*/ -webkit-transform: rotate (0deg); ; -webkit-transition: .3s; 180 grādi: pagriezt (-180 grādi)

Piemērs: lai animētu, norādiet uz trīsstūri

Kā redzat, viss ir pavisam vienkārši. Šīs metodes trūkums ir tāds, ka trīsstūris nespēs piešķirt ēnas un citas skaistas iezīmes. Bet metode ir vienkārša un pārrobežu. Tas, vai to izmantot projektos, ir atkarīgs no jums.

18 atbildes

CSS trīsstūri: traģēdija piecos cēlienos

Apmales izmanto stūra malu, kur tās krustojas (45° leņķis ar vienādiem apmales platumiem, bet apmales platuma maiņa var izkropļot leņķi).

Paslēpjot noteiktas robežas, jūs varat iegūt trīsstūra efektu (kā redzat iepriekš, padarot dažādas daļas dažādās krāsās). caurspīdīgu bieži izmanto kā malu krāsu, lai sasniegtu trīsstūra formu.

Sāciet ar pamata kvadrātu un apmalēm. Katrai apmalei būs atšķirīga krāsa, tāpēc mēs varam tās norādīt atsevišķi:

Bet nav nepieciešama augšējā apmale, tāpēc iestatiet tās platumu uz 0 pikseļi. Tagad mūsu apmale-apakšējā 200 pikseļi padarīs mūsu trīsstūri 200 pikseļus garu.

Pēc tam, lai paslēptu divus sānu trīsstūrus, iestatiet necaurredzamību uz apmales krāsu. Tā kā augšējā apmale ir efektīvi noņemta, mēs varam iestatīt arī apmales caurspīdīgumu ar augšējo krāsu.

Atšķirīga pieeja:

CSS3 trīsstūri ar rotācijas rotāciju

Trīsstūrveida formu ir diezgan viegli izgatavot, izmantojot šo tehniku. Cilvēkiem, kuri vēlas redzēt animāciju, kas izskaidro, kā šī tehnika darbojas, ir:

Saite uz ANIMĀCIJU: Kā izveidot trīsstūri CSS3.
UN DEMO: CSS3 trijstūri, kas izgatavoti ar rotācijas transformāciju.

Pretējā gadījumā šeit ir detalizēts skaidrojums 4 soļos (tā nav traģēdija) par to, kā izveidot vienādsānu taisnstūri ar vienu elementu.

1. piezīme. Neviensānu trijstūriem un smalkām lietām varat skatīt 4. darbību.
2. piezīme. Pārdevēja prefiksi nav iekļauti tālāk norādītajos fragmentos. tie ir iekļauti codepen dēmonos.
3. piezīme. HTML kods šādam skaidrojumam vienmēr ir:

1. SOLIS: izveidojiet div

Vienkārši pārliecinieties, ka platums = 1,41 x augstums. Varat izmantot jebkuru tehniku (), tostarp izmantot procentus un apakšējo daļu, lai saglabātu malu attiecību un izveidotu atsaucīgu trīsstūri. Nākamajā attēlā dimensijai ir zeltaini dzeltena apmale.

Šajā divdaļā ievietojiet pseidoelementu un piešķiriet tam 100% vecāku platuma un augstuma. Nākamajā attēlā pseido elementam ir zils fons.

2. SOLIS: . Pagriezieties

Pirmkārt, vissvarīgākā lieta: noteikt transformācijas izcelsmi. noklusējuma izcelsme atrodas pseidoelementa centrā, un mums tas ir nepieciešams apakšējā kreisajā stūrī. Pievienojot šo CSS pseido elementam:

transformācijas izcelsme:0 100%; vai transformācijas izcelsme: pa kreisi apakšā;

Tagad mēs varam pagriezt pseidoelementu par 45 grādiem pulksteņrādītāja virzienā, izmantojot transformāciju: rotate(45deg);

Šobrīd mums ir šāds CSS:

3. SOLIS: paslēpiet to

Lai paslēptu nevēlamās pseidoelementa daļas (visu, kas pārplūst div ar dzelteno apmali), jums vienkārši jāiestata overflow:hidden; uz vienu konteineru. pēc dzeltenās apmales noņemšanas iegūsiet... Trijstūris !

4. SOLIS: turpiniet...

Kā parādīts demonstrācijā, varat pielāgot trīsstūrus:

Padariet tos plānākus vai plakanākus, spēlējot ar skewX() .
Lieciet tiem norādīt pa kreisi, pa labi vai jebkurā citā virzienā, spēlējoties ar transformācijas un rotācijas virzienu.
Veiciet pārdomas, izmantojot 3D transformāciju.
Norādiet trīsstūra robežas
Novietojiet attēlu trīsstūra iekšpusē
Daudz vairāk... Atbrīvojiet CSS3 jaudu!

Kāpēc izmantot šo metodi?

Trijstūris var viegli reaģēt.
Jūs varat izveidot trīsstūri ar rāmi.
Jūs varat saglabāt trīsstūra robežas. Tas nozīmē, ka varat aktivizēt kursora novietošanas stāvokli vai klikšķa notikumu tikai tad, ja kursors atrodas trīsstūrī. Tas var būt ļoti noderīgi dažās situācijās, piemēram, šajā situācijā, kad katrs trīsstūris nevar to uzspiest saviem kaimiņiem, lai katram trijstūrim būtu savs lidojuma stāvoklis.
Varat izveidot fantastiskus efektus, piemēram, atspulgus.
Tas palīdzēs izprast 2D un 3D transformācijas īpašības.

Kāpēc neizmantot šo tehniku?

Galvenais trūkums ir pārlūkprogrammas saderība, 2D transformācijas rekvizītus atbalsta IE9+, tāpēc jūs nevarat izmantot šo paņēmienu, ja plānojat atbalstīt IE8. Papildinformāciju skatiet sadaļā CanIuse. Dažiem izdomātiem efektiem, izmantojot 3D transformācijas, piemēram, atstarošanas atbalstu atbalsta IE10+ (plašāku informāciju skatiet sadaļā CanIuse).
Jums nav nepieciešams nekas atsaucīgs, un jums ir piemērots vienkāršs trīsstūris, tad jums vajadzētu izvēlēties šeit aprakstīto apmales paņēmienu: labāka pārlūkprogrammas saderība un vieglāk saprotama, pateicoties šeit publicētajiem ierakstiem par apbrīnošanu.

Pārveido = [("border-left-width" :"30", "margin-left": "70"), ("border-bottom-width" :"80"), ("border-left-width" : "30"), ("border-top-width" :"0", "margin-top": "70"), ("width" :"0"), ("height" :"0", "margin" -augšā": "120"), ("borderLeftColor" :"caurspīdīgs"), ("borderRightColor" :"caurspīdīgs" ]); $("#a").click(function() ($(.border").trigger("klikšķis");)); (funkcija($) ( var ilgums = 1000 $(.border").click(function() ( for (var i=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 } Click it!

Izlases versija

Visu uzreiz versija

Pieņemsim, ka mums ir šāds div:

Tagad mainiet CSS soli pa solim, lai iegūtu skaidru priekšstatu par to, kas notiek jums apkārt

#trijstūris (fons: purpursarkans; platums: 150 pikseļi; augstums: 150 pikseļi; apmale pa kreisi: 50 pikseļi viendabīgi melna; mala labā puse: 50 pikseļi vienkrāsains melns; apmale apakšā: 50 pikseļi vienkrāsains melns; apmale augšpusē: 50 pikseļi vienkrāsains melns; )

Šis ir vienkāršs div. Ar ļoti vienkāršu CSS. Tātad lajs var saprast. Divdaļa ir 150 x 150 pikseļi ar 50 pikseļu apmali. Pievienots attēls:

#trijstūris (fons: purpursarkans; platums: 150 pikseļi; augstums: 150 pikseļi; apmale pa kreisi: 50 pikseļi vienkrāsains dzeltens; mala labā puse: 50 pikseļi vienkrāsains zaļš; apmale apakšā: 50 pikseļi vienkrāsains sarkans; apmale augšpusē: 50 pikseļi vienkrāsains zils; )

Tagad es tikko nomainīju apmales krāsu visām četrām pusēm. Pievienots attēls.

#trijstūris (fons: purpursarkans; platums: 0; augstums: 0; apmale pa kreisi: 50 pikseļi vienkrāsains dzeltens; mala labā puse: 50 pikseļi vienkrāsains zaļš; apmale apakšā: 50 pikseļi vienkrāsains sarkans; apmale augšpusē: 50 pikseļi vienkrāsains zils; )

Tagad es tikko mainīju div augstumu un platumu no 150 pikseļiem uz nulli. Pievienots attēls

#trijstūris (fons: purpursarkans; platums: 0 pikseļi; augstums: 0 pikseļi; apmale pa kreisi: 50 pikseļi, caurspīdīga; apmale pa labi: 50 pikseļi, caurspīdīga; apmale apakšā: 50 pikseļi vienkrāsains sarkans; apmale augšpusē: 50 pikseļi, caurspīdīgs; )

Tagad esmu padarījis visas apmales caurspīdīgas, izņemot apakšējo apmali. Attēls pievienots zemāk.

#trijstūris (fons: balts; platums: 0 pikseļi; augstums: 0 pikseļi; apmale pa kreisi: 50 pikseļi vienkrāsains, caurspīdīgs; apmale pa labi: 50 pikseļi vienkrāsains, caurspīdīgs; apmale apakšā: 50 pikseļi vienkrāsains sarkans; apmale augšpusē: 50 pikseļi, caurspīdīgs; )

Tagad es vienkārši nomainīju fona krāsu uz baltu. Pievienots attēls.

Tāpēc mēs esam ieguvuši vajadzīgo trīsstūri.

Apsveriet tālāk redzamo trīsstūri

Tas ir tas, kas mums tiek dots:

Ir ļoti vienkārši izveidot taisnleņķa trīsstūri, noņemot arī labo apmali.

Atšķirīga pieeja. Ar lineāro gradientu (tikai IE IE 10+). Varat izmantot jebkuru leņķi:

Labi, šis trīsstūris tiks izveidots, jo elementu apmales darbojas kopā HTML un CSS...

Tā kā mēs parasti izmantojam 1 vai 2 pikseļu apmales, mēs nekad nepamanām, ka apmalēm ir 45° leņķis viena pret otru ar vienādu platumu, un, mainoties platumam, mainās arī leņķa pakāpe, palaidiet manis izveidoto CSS kodu zemāk:

Trīsstūris (platums: 100 pikseļi; augstums: 100 pikseļi; apmale pa kreisi: 50 pikseļi, vienkrāsains melns; apmale pa labi: 50 pikseļi vienkrāsains melns; apmale apakšā: 100 pikseļi, vienkrāsains sarkans; )

Tad nākamajā solī mums nav platuma un augstuma, kaut kas līdzīgs šim:

Trīsstūris (platums: 0; augstums: 0; apmale pa kreisi: 50 pikseļi vienkrāsains melns; mala labā puse: 50 pikseļi vienkrāsains melns; apmale apakšā: 100 pikseļi vienkrāsains sarkans; )

Un tagad mēs padarām kreiso un labo apmali neredzamu, lai izveidotu vēlamo trīsstūri, kā parādīts zemāk:

Trīsstūris (platums: 0; augstums: 0; apmale pa kreisi: 50 pikseļi vienkrāsains, caurspīdīgs; apmale labajā pusē: 50 pikseļi vienkrāsains, caurspīdīgs; apmale apakšā: 100 pikseļi vienkrāsains sarkans; )

Ja nevēlaties palaist fragmentu, lai skatītu darbības, esmu izveidojis attēlu secību, lai skatītu visas darbības vienā attēlā:

Tas ir tas, ko es uzskatu, ka šis jautājums ir palaists garām; klipu ceļš

klipu ceļš īsumā

Apgriešana ar klipceļa rekvizītu ir līdzīga formas (piemēram, apļa vai piecstūra) izgriešanai no taisnstūrveida papīra lapas. Rekvizīts pieder CSS maskēšanas moduļa 1. līmeņa specifikācijai." Specifikācijā teikts: "CSS maskēšana nodrošina divus veidus, lai daļēji vai pilnībā paslēptu vizuālo elementu daļas: maskēšana un izgriešana."

clip-path izmantos pašu elementu, nevis tā apmales, lai apgrieztu opcijās norādīto formu. Tajā tiek izmantota ļoti vienkārša procentuālo koordinātu sistēma, kas padara to viegli rediģējamu un nozīmē, ka varat to izņemt un dažu minūšu laikā izveidot dīvainas un brīnišķīgas formas.

Trīsstūra formas piemērs

Div ( -webkit-clip-path: daudzstūris (50% 0%, 0% 100%, 100% 100%); klipceļš: daudzstūris (50% 0%, 0% 100%, 100% 100%); fons : sarkans platums: 100 pikseļi; augstums: 100 pikseļi;

Negatīvie

Šobrīd tam ir būtisks trūkums: viens no tiem ir liels atbalsta trūkums, tas tiešām tiek izplatīts tikai -webkit- pārlūkprogrammās un neatbalsta IE un tikai ļoti daļēji FireFox.

Resursi

Šeit ir daži noderīgi resursi un materiāli, lai labāk izprastu klipu ceļu un arī sāktu veidot savu.

Ļauj izveidot 2 trīsstūrus, otrajā izmantosim pseidoklasi:pēc un novietosim to tieši zem otra:

Bultiņa (platums: 0; augstums: 0; apmales rādiuss: 50 pikseļi; displejs: iekļauts bloks; pozīcija: relatīvs; ) .bultiņa: pēc( saturs: ""; platums: 0; augstums: 0; pozīcija: absolūts; ) .bultiņa-up( border-left: 50px solid caurspīdīgs; border-right: 50px solid caurspīdīgs; border-down: 50px solid #333; ) .arrow-up:after( top: 5px; border-left: 50px solid caurspīdīgs; apmale-labā: 50px vienlaidus caurspīdīgs apmale-down: 50px solid #ccc: -50px;

2. darbība

Tagad mums vienkārši jāiestata otrā trīsstūra dominējošā apmales krāsa uz tādu pašu fona krāsu:

Ekrānuzņēmums ar visām bultiņām:
http://jsfiddle.net/tomsarduy/r0zksgeu/

Gandrīz visas atbildes ir vērstas uz trīsstūri, kas izveidots, izmantojot robežas, tāpēc es izstrādāšu lineārā gradienta metodi (kā sākts @lima_fil atbildē).

Izmantojot grādu vērtību, piemēram, 45°, mums būs jāievēro noteikta augstuma/platuma attiecība, lai iegūtu vēlamo trīsstūri, un tas nereaģēs:

Tri (platums: 100 pikseļi; augstums: 100 pikseļi; fons: lineārs gradients (45 grādi, caurspīdīgs 49,5%, sarkans 50%); /*Ilustrācijai*/ apmale: 1 px cieta; ) Labs viens slikts viens slikts

Tā vietā, lai to darītu, mums vajadzētu apsvērt iepriekš definētas virziena vērtības, piemēram, uz leju, uz augšu utt. Šajā gadījumā mēs varam iegūt jebkura veida trīsstūri, vienlaikus saglabājot to atsaucīgu.

1) Taisns trīsstūris

Lai iegūtu šādu trīsstūri, mums ir nepieciešams viens lineārs gradients un diagonālais virziens, piemēram, uz leju pa labi , uz augšu pa kreisi , uz leju pa kreisi utt.

Tri-1,.tri-2 (displejs: iekļauts bloks; platums: 100 pikseļi; augstums: 100 pikseļi; fons: lineārs gradients (apakšā pa kreisi, caurspīdīgs 49,5%, sarkans 50%); apmale: 1 px ciets; animācija: izmaiņas 2s lineārs bezgalīgs alternatīvs ) .tri-2 ( fons: lineārs gradients (augšējā labajā pusē, caurspīdīgs 49,5%, sarkans 50%); robeža: nav; ) @ key frames mainīt ( no ( platums: 100 pikseļi; augstums: 100 pikseļi; ) uz ( augstums: 50 pikseļi; platums: 180 pikseļi; ) )

2) vienādsānu trīsstūris

Šim nolūkam mums būs nepieciešami 2 lineāri gradienti, kā norādīts iepriekš, un katrs no tiem aizņems pusi platuma (vai augstuma). Tādā veidā mēs izveidojam pirmā trīsstūra spoguļattēlu.

Trīs (displejs: iekļauts bloks; platums: 100 pikseļi; augstums: 100 pikseļi; fona attēls: lineārs gradients (apakšējā labajā pusē, caurspīdīgs 49,5%, sarkans 50%), lineārs gradients (apakšā pa kreisi, caurspīdīgs 49,5%, sarkans 50%; fona izmērs: 50,3% 100%; alternate ) @keyframes mainīt ( no ( platums: 100 pikseļi; augstums: 100 pikseļi; ) uz ( augstums: 50 pikseļi; platums: 180 pikseļi; ) )

3) vienādmalu trīsstūris

Tas ir nedaudz sarežģīti, jo mums ir jāsaglabā attiecība starp gradienta augstumu un platumu. Mums būs tāds pats trīsstūris kā iepriekš, bet mēs sarežģīsim aprēķinu, lai vienādsānu trīsstūri pārvērstu vienādmalu trīsstūrī.

Mums ir divi gradienti g1 un g2 , zilā līnija ir div platums w, un katram gradientam būs 50% no tā (w/2), un katra trijstūra mala ir vienāda ar w . Zaļā līnija ir abu gradientu augstums hg, un mēs varam viegli iegūt zemāk esošo formulu:

(w/2)² + hg² = w² ---> hg = (sqrt(3)/2) * w ---> hg = 0,866 * w

Mēs varam paļauties uz calc (), lai veiktu aprēķinus un iegūtu vēlamo rezultātu:

Tri ( --w:100px; platums:var(--w); augstums: 100px; displejs:inline-block; fona attēls: lineārs gradients (apakšējā labajā pusē, caurspīdīgs 49,5%, sarkans 50%), lineārs- gradients(apakšā pa kreisi, caurspīdīgs 49,5%, sarkans 50%) background-repeat:no-repeat;

Vēl viens veids ir kontrolēt div augstumu un saglabāt gaišu gradienta sintakse:

4) Nejaušs trīsstūris

Lai iegūtu nejaušu trīsstūri, tas ir vienkārši, jo mums vienkārši ir jānoņem katra nosacījuma 50% nosacījumi, BET mums ir jāsaglabā abi nosacījumi (abiem ir jābūt vienādam augstumam un abu platumu summai ir jāsasniedz 100%).

Bet ko darīt, ja mēs vēlamies definēt vērtību katrai pusei? Mums tikai jāveic aprēķins vēlreiz!

Definēsim hg1 un hg2 kā mūsu gradienta augstumu (abi vienādi ar sarkano līniju), un pēc tam wg1 un wg2 kā mūsu gradienta platumu (wg1 + wg2 = a). Es neiedziļināšos aprēķinos, bet beigās mēs iegūstam:

Wg2 = (a²+c²-b²)/(2a) wg1 = a - wg2 hg1 = hg2 = kvadrāts (b² - wg1²) = kvadrāts (c² - wg2²)

Tagad mēs esam sasnieguši CSS ierobežojumu, jo pat ar calc() mēs nevarēsim to ieviest, tāpēc mums vienkārši jāsamontē gala rezultāts manuāli un jāizmanto kā fiksēts izmērs:

Tri ( --wg1: 20px; --wg2: 60px; --hg:30px; platums:calc(var(--wg1) + var(--wg2)); augstums: 100px; displejs: inline-block; fons -attēls: lineārais gradients (apakšā pa labi, caurspīdīgs 49,5%, sarkans 50%), lineārs gradients (pa kreisi apakšā, caurspīdīgs 49,5%, sarkans 50%), var(--wg1) var(-); -hg),var(--wg2) var(--hg): pa kreisi apakšā, pa labi uz leju: no-repeat;

bonuss

Mēs nedrīkstam aizmirst, ka mēs varam izmantot arī rotāciju un/vai slīpumu, un mums ir vairāk iespēju iegūt vairāk trīsstūra:

Tri ( --wg1: 20 pikseļi; --wg2: 60 pikseļi; --hg: 30 pikseļi; platums: calc(var(--wg1) + var(--wg2) - 0,5 pikseļi; augstums: 100 pikseļi; displejs: inline- fona attēls: lineārais gradients (pa labi, caurspīdīgs 49%, sarkans 50%), lineārs gradients (apakšā pa kreisi, caurspīdīgs 49%, sarkans 50%); -wg2) var(--hg): pa kreisi apakšā, pa labi, back-repeat:no-repeat;

Un, protams, mums ir jāpatur prātā SVG risinājums, kas dažās situācijās var būt piemērotāks:

svg ( platums: 100 pikseļi; augstums: 100 pikseļi; ) daudzstūris ( aizpildījums: sarkans; )

Citi jau to ir labi izskaidrojuši. Ļaujiet man sniegt jums animāciju, kas to ātri izskaidros: http://codepen.io/chriscoyier/pen/lotjh

Šeit ir daži kodi, lai jūs varētu spēlēt un apgūt jēdzienus.

#border-demo (mala-kreisā: 50 pikseļi vienkrāsains caurspīdīgs; apmale-labais: 50 pikseļi vienkrāsains caurspīdīgs; apmale apakšā: 100 pikseļi vienkrāsains zils; )

dalīties