Triunghiuri pe mijloace css

Triunghiuri de instrumente CSS

Pe site-urile de triunghiuri sunt folosite și de timp din nou, ca o parte din elementele de design, de exemplu, acestea servesc ca un pointer la un obiect prin direcționarea atenției cititorului la locul potrivit. Triunghiuri servi, de asemenea, o funcție decorativă, făcând unitățile în cazul în care acestea sunt aplicate, mai elegant și modern. Figura de mai jos prezintă un exemplu de utilizare a design-triunghi.

face în mod direct un triunghi cu CSS nu poate, prin urmare, sunt disponibile două metode, permițându-le să adăugați - în frontieră și transforma.

Utilizarea frontierei

Deși limitele create de proprietate de frontieră. nu este direct relevant pentru triunghiuri, este utilizat pentru această frontieră cel mai des. Dacă specificați o lățime zero și înălțimea elementului, precum și pentru a stabili o frontieră suficient de gros, vom vedea un set de patru triunghiuri. Pentru claritate, limitele pe toate laturile au culori diferite.

Lăsând doar marginea dreaptă, iar restul de a face clar, vom obține triunghiul de culoare dorit

In exemplul 1, arată adăugarea unui triunghi la bloc prin pseudo :: după.

Exemplul 1. Bloc triunghi

Pentru elementele absolut poziționate la zero lățime și înălțime nu este necesară.

combinând în străinătate scor puteți obține patru mai multe tipuri de triunghiuri, care, în combinație cu deja menționate ne oferă opt variante. Aspectul lor și codul necesar este dat în tabel.

Posibile tipuri de triunghiuri

frontieră: 20px transparent solid; border-left: 20px verde solid; border-top: 20px verde solid;

Tabelul arată că granița invizibilă avea loc, ia în considerare acest lucru atunci când poziționarea elementelor. Style, de asemenea, trebuie să fie completate cu o lățime și înălțime de zero, sau de a folosi proprietatea poziție. așa cum sa procedat în exemplul 1.

Triunghiul poate face alte forme, dacă setați o grosime diferită de frontieră. Astfel, codul unității creare prezentat în figura de mai jos, este prezentat în Exemplul 2.

Exemplul 2. triunghi acută

Cu granița vom obține un solid triunghiuri colorate pentru a crea un cadru prezentat în figura de mai jos este necesar pentru a merge la truc și de a aplica un element peste altul, cu o ușoară de offset. Din nou, aici ne ajuta de: înainte și: după (exemplul 3).

Exemplul 3. triunghiuri suprapuse,

Din cauza ca impunem un element monocromatica peste altul, această metodă este adecvată numai pentru o umplere monocromatica și nu este potrivit pentru gradienți sau imagini de fundal.

folosind transformarea

Cu transformare, putem transforma elementul pătrat pentru 45º și de a obține de la ea un diamant. Acesta nu este un triunghi, ca atare, astfel încât să ne rezerve o parte proeminentă în vedere, iar restul se află în spatele celuilalt element (exemplul 4).

Exemplul 4. Transformarea

Rezultatul acestui exemplu.