Cum funcționează triunghiurile CSS? Cum să faci forme geometrice pe kss
În timp ce cercetam un proiect care m-a interesat, am dat peste exemplu interesant cum se creează un triunghi css. Și deoarece triunghiurile au devenit elemente utilizate în mod constant ale unei pagini web, trebuie să le putem crea. Această notă va fi despre această metodă.
După ce am căutat pe Google cum să faci un triunghi în css, am găsit câteva metode mai interesante, dar mi-a plăcut mai mult exemplul din proiect. Această metodă este veche și bine cunoscută. Se bazează pe utilizarea proprietăților CSS, cum ar fi culoarea marginii și lățimea marginii. Esența metodei este simplă. Creăm un bloc (div) și îl dăm proprietăți css
culoare-chenar și lățime-chenar . Proprietatea border-width specifică lățimea chenarului și ia patru valori. Grosimea chenarului sus, dreapta, jos, stânga. Permiteți-mi să vă reamintesc că atunci când scrieți această proprietate CSS, numărătoarea inversă începe de la marginea de sus și merge în sensul acelor de ceasornic. Astfel, pentru a crea un triunghi cu vârful în sus din blocul nostru, în proprietatea border-width vom scrie chenarul superior cu o grosime de 0, marginile din stânga și dreapta cu grosimea de jumătate de bloc, iar partea de jos cu grosimea blocului. Cred că același lucru a devenit deja clar cu proprietatea border-color. De asemenea, ia patru valori pe părțile laterale ale blocului. Dacă avem un triunghi pe un fundal alb, setați toate marginile la alb, cu excepția celui de jos. Ei bine, acum, ca de obicei, un exemplu. Deoarece nota nu era foarte mare, am decis să adaug animație CSS în triunghi.
.trianglebox( lățime: 200px; înălțime: 110px; chenar: 1px solid #000; padding-top: 25px; margine: 0 automat; ) .triangle( margin: 0 automat; lățime: 0px; înălțime: 0px; bordur-style: solid; /*for triangle css*/ border-color: #fff #fff-width: 0px 25px 25px /*for animation*/ -webkit-transform: rotate(0deg); ; -webkit-transition: .3s; tranziție: .3s; 180deg); transformare: rotire (-180deg)Exemplu: Pentru a anima, indicați spre triunghi
Una dintre sarcinile foarte frecvente cu care se confruntă un designer de layout este desenarea triunghiurilor în CSS. De exemplu, ele pot fi pe blocuri pliabile și extensibile, pe meniuri derulante sau pe alte elemente ale interfeței. Și în acest articol voi arăta cel mai mult optiuni optime desenarea unui triunghi în CSS.
1a metodaCreare imagine simplă cu o săgeată (de exemplu, o decupare dintr-un design). Eu însumi folosesc constant această metodă și știu că este cea mai populară și, în unele cazuri, singura. Dar există un mare dezavantaj aici: dacă faceți părți transparente ale triunghiului, trebuie să utilizați PNG, pe care IE6 nu îl acceptă. Și dacă luați JPG, atunci, în funcție de fundal, trebuie să faceți una sau alta imagine. Ca rezultat, pot exista 100 de săgeți identice care au fundaluri diferite, rezultând 100 de imagini.
a 2-a metodaAceastă metodă folosește deja CSS pur, este foarte simplă, dar nu puteți crea colțuri frumoase (de exemplu, cu umbre, degrade, cu unele modele complexe):
triunghi (
culoare-chenar: #000 #fff #fff #fff;
chenar-stil: solid;
lățime chenar: 10px 5px 0 5px;
inaltime: 0;
latime: 0;
}
Apoi, puteți aplica clasa triunghiului unui bloc div obișnuit, ca urmare, acest bloc va deveni o săgeată neagră (#000). Dimensiunile pot fi ajustate prin proprietatea border-width. Mulți dintre voi nici măcar nu ați auzit de această metodă, așa că dacă săgeata este simplă, atunci aceasta este cea mai bună metodă.
Alte moduriLe întâlnesc din când în când, dar nu le folosesc eu, deoarece niciuna nu este compatibilă între browsere. Toate folosesc CSS3 și/sau HTML5, care, din păcate, sunt încă foarte slab acceptate chiar și de browserele moderne și nu este nevoie să vorbim despre cele vechi. Prin urmare, vă recomand să utilizați în acest moment pana acum doar primele 2 metode.
triunghi cu cursă css (14)
transforms = [("border-left-width":"30", "margin-left": "70"), ("border-bottom-width":"80"), ("border-right-width": "30"), ("border-top-width":"0", "margin-top": "70"), ("width" :"0"), ("height":"0", "margin" -top": "120"), ("borderLeftColor" :"transparent"), ("borderRightColor" :"transparent" ]); $("#a").click(function() ($(".border").trigger("click");)); (funcție($) ( var duration = 1000 $(".border").click(function() (pentru (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!
/** * Randomizați ordinea elementelor de matrice pe loc.< 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!
*/ funcția shuffleArray(array) ( pentru (var i = array.length - 1; i > 0; i--) ( var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[j] = temp ) transforms = [ ("border-left-width":"30", "margin-left": "70"); bottom-width" :"80"), ("border-right-width" :"30"), ("border-top-width" :"0", "margin-top ": "70"), (" width" :"0"), ("height" :"0"), ("borderLeftColor" :"transparent"), ("borderRightColor" :"transparent") ]); transforms = shuffleArray(transforms) $("#a").click(function() ($(".border").trigger("click");)); (funcție($) ( var duration = 1000 $(".border").click(function() (pentru (var i=0; i
$("#a").click(function() ($(".border").trigger("click");)); (function($) ( var duration = 1000 $(".border").click(function() ( $(this).animate(("border-top-width": 0 , "border-left-width": 30, „border-right-width”: 30, „border-bottom-width”: 80, „width”: 0, „height”: 0, „margin-left”: 100, „margin-top”: 150, "borderTopColor": "transparent", "borderRightColor": "transparent", "borderLeftColor": "transparent"), duration) )).end() )(jQuery)).border (marja: 50px; lățime: 50px; înălțime : 50px; lățimea de bord: 50px;
Triunghiuri CSS: o tragedie în cinci acte
Avem doi gradienți g1 și g2 , linia albastră este lățimea div-ului w și fiecare gradient va avea 50% (w/2) și fiecare latură a triunghiului poate fi egală cu w . Linia verde este înălțimea gradientului hg și putem obține cu ușurință formula de mai jos:
(w/2)² + hg² = w² ---> hg = (sqrt(3)/2) * w ---> hg = 0,866 * w
Ne putem baza pe calc() pentru a efectua calculul și a obține rezultatul de care avem nevoie:
Tri (--w:100px; lățime:var(--w); înălțime:calc(0,866 * var(--w)); afișare:inline-block; fundal: liniar-gradient (în dreapta jos, transparent 49,8% ,roșu 50%) stânga, gradient liniar (în stânga jos, transparent 49,8%, roșu 50%), dimensiunea fundalului: 50,2% 100%;
4) Triunghi aleatoriu
Pentru a obține un triunghi aleatoriu, este ușor, deoarece trebuie doar să eliminăm condiția de 50% a fiecăruia, dar trebuie să păstrăm cele două condiții (ambele ar trebui să aibă aceeași înălțime, iar suma ambelor lățimi ar trebui să fie de 100%).
Tri-1 ( lățime: 100 px; înălțime: 100 px; afișare: bloc inline; imagine de fundal: gradient liniar (în dreapta jos, transparent 50%, roșu 0), gradient liniar (în stânga jos, transparent 50%, roșu 0); fundal-size: 20% 60%, 80% 60% fundal-poziție: stânga jos, dreapta jos: fără repetare;
Dar dacă vrem să definim o valoare pentru fiecare parte? Trebuie doar să facem din nou calculul!
Să definim hg1 și hg2 ca înălțimea gradientului nostru (ambele sunt egale cu linia roșie), apoi wg1 și wg2 ca lățime a gradientului nostru (wg1 + wg2 = a). Nu voi detalia calculul, dar la final vom avea:
Wg2 = (a²+c²-b²)/(2a) wg1 = a - wg2 hg1 = hg2 = sqrt(b² - wg1²) = sqrt(c² - wg2²)
Acum am atins limita CSS, deoarece nici cu calc() nu vom putea implementa acest lucru, așa că trebuie doar să asamblam manual rezultatul final și să le folosim ca dimensiune fixă:
bonus
Nu trebuie să uităm că putem aplica și rotație și/sau înclinare, și avem mai multe posibilitati pentru a obține un triunghi mai mare:
Tri (--wg1: 20px; --wg2: 60px; --hg:30px; lățime:calc(var(--wg1) + var(--wg2)); înălțime: 100px; afișare:inline-block; fundal -imagine: gradient liniar (în dreapta jos, transparent 50%, roșu 0), gradient liniar (în stânga jos, transparent 50%, dimensiunea fundalului roșu: var(--wg1) var(--hg); ) ),var(--wg2) var(--hg fundal-poziție: stânga jos, dreapta-jos;
Și, desigur, trebuie să ținem cont de soluția SVG, care poate fi mai potrivită în anumite situații:
svg ( lățime: 100 px; înălțime: 100 px; ) poligon ( umplere: roșu; )
Alții au explicat deja bine. Permiteți-mi să vă dau o animație care va explica acest lucru rapid: http://codepen.io/chriscoyier/pen/lotjh
Iată câteva coduri pentru a vă juca și a învăța conceptele.
/*border-width este grosimea chenarului*/ #border-demo ( fundal: gri; chenar-culoare: galben albastru roșu verde;/*sus dreapta jos stânga*/ border-style: solid; border-width: 25px 25px 25px 25px ;/*sus dreapta jos stanga*/ inaltime: 50px latime: 50px;
Joacă-te cu ea și vezi ce se întâmplă. Setați înălțimea și lățimea la zero. Apoi eliminați chenarul de sus și faceți transparentă stânga și dreapta sau priviți codul de mai jos pentru a crea un triunghi css:
#border-demo ( chenar-stânga: 50px solid transparent; chenar-dreapta: 50px continuu transparent; chenar-jos: 100px albastru continu; )
Abordare diferită. Cu gradient liniar (doar pentru IE, IE 10+). Puteți folosi orice unghi:
Triunghi ( margine: 50px automat; lățime: 100px; înălțime: 100px; /* gradient liniar */ fundal: -moz-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%) /* FF3.6+ */ fundal: -webkit-gradient ( liniar, stânga sus, dreapta jos, color-stop(0%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,0)), culoare-stop ( 50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,1))); /* Chrome,Safari4+ */ fundal: -webkit-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, 0 ,1) 100%) /* Chrome10+,Safari5.1+ */ fundal: -o-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%) /* Opera 11.10+ */ fundal: -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%) /* IE10+ */ fundal: liniar-gradient(135deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0) ,1) 50%,rgba(255,0,0,1) 100%) /* W3C */; )
Începeți cu piața principală și granițele. Fiecare chenar va avea o culoare diferită, așa că le putem spune separat:
Triunghi (culoare chenar: galben albastru roșu verde; stil chenar: solid; lățime chenar: 200px 200px 200px 200px; înălțime: 0px; lățime: 0px; )
Dar nu există margine superioară, așa că setați lățimea la 0px . Acum, 200 px-ul nostru va face triunghiul nostru 200px înălțime.
Triunghi (culoare chenar: galben albastru roșu verde; stil chenar: solid; lățime chenar: 0px 200px 200px 200px; înălțime: 0px; lățime: 0px; )
Apoi, pentru a ascunde cele două triunghiuri laterale, setați opacitatea cadrului. Deoarece chenarul de sus este eliminat efectiv, putem seta și transparența chenarului la culoarea de sus.
Triunghi (culoare chenar: transparent transparent roșu transparent; stil chenar: solid; lățime chenar: 0px 200px 200px 200px; înălțime: 0px; lățime: 0px; )
Luați în considerare triunghiul de mai jos
Triunghi (chenar-jos:15px solid #000; chenar-stânga:10px solid transparent; chenar-dreapta:10px solid transparent; lățime:0; înălțime:0; )
Acesta este ceea ce ni se oferă:
De ce a ieșit sub această formă? Diagrama de mai jos explică dimensiunile, rețineți că 15px a fost folosit pentru marginea de jos și 10px a fost folosit pentru stânga și dreapta.
Este foarte ușor să faci un triunghi dreptunghic eliminând și chenarul obișnuit.
Și acum ceva complet diferit...
În loc să folosiți trucuri css, nu uitați de soluții la fel de simple ca obiectele html:
▲Marginile folosesc marginea colțului unde se intersectează (unghi de 45° cu lățimi egale, dar modificarea lățimii marginii poate distorsiona unghiul).
Ascunzând anumite margini puteți obține un efect de triunghi (după cum puteți vedea mai sus făcând diferite porțiuni de culori diferite). transparent este adesea folosit ca culoare de margine pentru a obține o formă de triunghi.
iată un alt lăutar:
Container:după (poziție: absolut; dreapta: 0; conținut: ""; margine-dreapta:-50px; margine-jos: -8px; lățime chenar: 25px; stil chenar: solid; culoare chenar: transparent transparent transparent #000; z-index: 10 -webkit-transiție: vizibilitate 50ms ease-in-out: 21px; ; margin-top: 100px; lățime: 80px; culoare de fundal: #000;
Abordare diferită:
Triunghiuri CSS3 cu rotație de rotațieForma triunghiulară este destul de ușor de realizat folosind această tehnică. Pentru persoanele care preferă să vadă o animație care explică cum funcționează această tehnică, aici este:
- Link către ANIMATION: Cum să creați un triunghi CSS3 .
- ȘI DEMO: triunghiuri CSS3, realizat cu transformare rotire.
În rest, iată o explicație detaliată în 4 pași (nu este o tragedie) despre cum să faci un triunghi dreptunghic isoscel cu un singur element.
- Nota 1: Pentru triunghiuri non-isoscele și lucruri fanteziste, puteți vedea pasul 4 .
- Nota 2: prefixele furnizorului nu sunt incluse în următoarele fragmente. sunt incluse în demonii codepen .
- Nota 3: HTML-ul pentru următoarea explicație este întotdeauna:
Ușor, asigurați-vă că lățime = 1,41 x înălțime. Puteți folosi orice tehnică (), inclusiv utilizarea valori procentualeși căptușeală-partea de jos pentru a menține raportul de aspect și a crea un triunghi flexibil. Pe următoarea imagine div are un chenar galben auriu.
În acest div, introduceți un pseudo element și dați-i 100% lățime și înălțime ale elementului părinte. Pseudoelementul are un fundal albastru în imaginea următoare.
CSS :
Tr ( lățime: 30%; umplutură-jos: 21,27%; /* = lățime / 1,41 */ poziție: relativă; ) .tr: înainte ( conținut: ""; poziție: absolut; sus: 0; stânga: 0; lățime : 100% înălțime: 100%: #0079C6)
PASUL 2: Să ne întoarcemÎn primul rând, cel mai important lucru: determinați originea transformării. În mod implicit, originea este în centrul pseudo-elementului și o dorim în colțul din stânga jos. Adăugând aceasta CSS la pseudo element:
transformare-origine:0 100%; sau transform-origine: stânga jos;
Acum putem roti transform: rotate(45deg); 45 de grade în sensul acelor de ceasornic cu transformare: rotire(45deg);
Momentan avem asta CSS :
Tr ( lățime: 30%; umplutură-jos: 21,27%; /* = lățime / 1,41 */ poziție: relativă; ) .tr:before ( conținut: ""; poziție: absolut; sus: 0; stânga: 0; lățime : 100% înălțime: 100%;
PASUL 3: ascunde-lPentru a ascunde părțile nedorite ale pseudo-elementului (orice lucru care depășește div-ul cu marginea galbenă), trebuie doar să setați overflow:hidden; pe recipient. după îndepărtarea chenarului galben, veți obține... TRIANGUL ! :
Tr ( lățime: 30%; umplutură-jos: 21,27%; /* = lățime / 1,41 */ poziție: relativă; preaplin: ascuns; ) .tr:before ( conținut: ""; poziție: absolut; sus: 0; stânga : 0; lățime: 100%: #0079C6;
PASUL 4: merge mai departe...Făcând un pas mai departe, folosind css pe baza acestui lucru, am adăugat săgeți în spate și următoarele butoane (da, știu că nu este 100% cross-browser, dar totuși un loc).
Triunghi ( lățime: 0; înălțime: 0; chenar-stânga: 50px continuu transparent; chenar-dreapta: 50px continuu transparent; chenar-jos: 100px roșu continuu; margine:20px auto; ) .triunghi-jos (border-bottom:none ; chenar-sus: 100px roșu continuu ) .triunghi-stânga (border-left:none; chenar-dreapta: 100px roșu continuu; chenar-bottom: 50px continuu transparent; .triunghi-sus transparent; ) ( chenar-dreapta:niciuna; chenar-stânga: 100px roșu continuu; chenar-bottom: 50px continuu transparent; border-sus: 50px continuu transparent; ) .triangle-after:after ( lățime: 0; înălțime: 0; chenar-stânga : 5 px bord-dreapta: 5 px, 5 px; ; chenar-dreapta: 5px transparent;
chenar-jos: 5px albastru solid;
margine: 0 5px;conţinut:""; display:inline-block; ) .triangle-before-left:before (border-left:none; chenar-dreapta: 5px albastru continuu; border-bottom: 5px continu transparent; border-top: 5px continu transparent; ) Înapoi Următorul
Mulți oameni au auzit că puteți face triunghiuri folosind CSS. Există un hack grozav pentru acest lucru cu proprietatea border pe care o puteți folosi pentru a face triunghiuri CSS fără o singură imagine.
Cum să faci triunghiuri în CSSCum credeți că browserul ar trebui să afișeze chenarele dacă toate chenarele au o culoare transparentă (adică nu există), iar una (de exemplu, partea de jos) are o chenar = 10px și are o culoare? A fulgerat ceva? Corect! Se va restrânge treptat granițele rămase până la un punct. Nu este logic, dar este adevărat :)