Cum să taie colțurile pe css

problemă

Tăiere colțuri - nu este doar un mod rapid de a atinge obiectivul, dar, de asemenea, o opțiune populară styling, atât în ​​print design și web design. Cel mai adesea, aceasta implică tăierea unuia sau mai multor colțuri ale containerului la un unghi de 45 °. În ultimii ani, datorită faptului că a început să ia poziții skeuomorph de design plat, acest efect este deosebit de popular. Atunci când colțurile sunt tăiate doar pe o parte, și fiecare dintre ele deține 50% din înălțimea elementului, se creează o figură în formă de săgeată, care este, de asemenea, utilizat frecvent ca butoane de navigare și elemente de design, cum ar fi „pesmet“.

Cu toate acestea, CSS nu este încă suficient de instrumente pentru a crea acest efect cu ajutorul unor simple și clare decizii-o singură linie. Din cauza acestui fapt, mulți dezvoltatori au tendința de a folosi imagini de fundal: fie închide unghiurile de tăiere ale triunghiului (într-un fond cu o singură culoare) sau de a crea întregul fundal, cu un singur sau mai multe imagini, în cazul în care unghiurile deja tăiate. Este evident că astfel de metode sunt foarte inflexibile, acestea sunt dificil de întreținut, și de a crește timpul de așteptare din cauza cererilor suplimentare de-HTTP și dimensiunea totală a fișierelor site-ului.

O soluție posibilă pentru a ne oferi gradienți CSS atotputernici. Să presupunem că avem nevoie doar de un colț în unghi, de exemplu, partea din dreapta jos. Trucul este de a profita de capacitatea de a face declivitatile unghiului de direcție (de exemplu, 45deg) și poziția limitelor de tranziție de culoare în valorile absolute ale care nu se modifică atunci când dimensiunea totală de celule, model face parte. Din cele de mai sus, rezultă că vom avea doar un singur gradient liniar. Vom adăuga granița de tranziție de culoare transparent, pentru a crea un unghi de cut-off și o altă tranziție de frontieră de culoare în aceeași poziție, dar cu o culoare corespunzătoare fundal. Codul CSS va fi următorul (pentru un unghi de 15 pixeli):

Simplu, nu-i așa? Rezultatul pe care îl vedeți în imagine.

fundal: # 58a;
fundal: gradient linear (-45deg, transparent 15px, # 58a 0), gradient linear (45deg, transparent 15px, # 655-0);

Cu toate acestea, acest lucru nu funcționează. În mod prestabilit, ambele gradiente ocupă întreaga zonă a elementului, astfel încât să se ascundă reciproc. Trebuie să le reducem prin limitarea fiecăruia la jumătate din element folosind mărimea fundalului:
fundal: # 58a;
fundal: gradient linear (-45deg, transparent 15px, # 58a 0) drept, gradient linear (45deg, transparent 15px, # 655 0) stânga;
dimensiunea fundalului: 50% 100%;

Puteți vedea rezultatul în imagine.

În ciuda faptului că am aplicat dimensiunea de fundal. gradienti se suprapun reciproc. Motivul este că am uitat să dezactivați repetarea fundalului, astfel încât fiecare fundal este repetat de două ori. În consecință, unul dintre fundaluri încă ascunde celălalt, dar de data aceasta din cauza unei repetări. Noua versiune a codului arată astfel:
fundal: # 58a;
fundal: gradient linear (-45deg, transparent 15px, # 58a 0) drept, gradient linear (45deg, transparent 15px, # 655 0) stânga;
dimensiunea fundalului: 50% 100%;
background-repeat: nu-repeta;

Rezultatul pe care îl puteți vedea în imagine și asigurați-vă că este în sfârșit! - Lucrări! Probabil ați ghicit deja cum să aplicați acest efect în toate cele patru colțuri. Veți avea nevoie de patru gradienți și un cod similar cu următorul:

fundal: # 58a;
fundal: gradient liniar (135deg, transparent 15px, # 58a0) din stânga sus,

gradient linear (-135deg, transparent 15px, # 655 0) de sus dreapta,

gradient linear (-45deg, transparent 15px, # 58a 0) din dreapta jos,

CONSILIULUI
Am folosit culori diferite (# 58a și # 655) pentru a simplifica depanarea. În practică, ambele gradienți vor avea aceeași culoare.
Dar problema cu codul anterior este că este dificil de întreținut. Este nevoie de cinci schimbări pentru a schimba culoarea de fundal și patru pentru a schimba unghiul. O impuritate creată folosind un preprocesor ar putea reduce numărul de repetări. Iată cum va arăta acest cod în SCSS:
SCSS
@ mixin colțuri înclinate ($ bg,
$ tl: 0, $ tr: $ t1, $ br: $ tl, $ bl: $ tr)
fundal: $ bg;
fundal:
gradient linear (135deg, transparent $ tl, $ bg 0)
sus stânga,
gradient linear (225deg, transparent $ tr, $ bg 0)
sus dreapta,
gradient linear (-45deg, transparent $ br, $ bg 0)
din dreapta jos,
gradient linear (45deg, transparent $ bl, $ bg 0)
din stânga jos;
dimensiunea fundalului: 50% 50%;
background-repeat: nu-repeta;
>

Curbe de tăiere curbate

radial-gradient (cerc la dreapta sus, transparent 15px, # 58a 0) sus dreapta,

radial-gradient (cerc la dreapta jos, transparent 15px, # 58a 0) din dreapta jos,

radial-gradient (cerc la stânga jos, transparent 15px, # 58a 0) din stânga jos;
dimensiunea fundalului: 50% 50%;
background-repeat: nu-repeta;

La fel ca în tehnica anterioară, mărimea unghiului poate fi controlată prin pozițiile limitelor de tranziție a culorilor, iar impuritatea este capabilă să facă acest cod mai adecvat pentru o întreținere ulterioară.

Soluție cu SVG șir și imagine de margine

Soluție cu cale de tăiere

Deși soluția de imagine frontală este foarte compactă și respectă principiile DRY, ea impune anumite limitări. De exemplu, fondul nostru ar trebui să fie în întregime fie în întregime, fie cel puțin de-a lungul marginilor pline de culoare solidă. Ce se întâmplă dacă vrem să utilizați un alt tip de fond, cum ar fi textura, model, sau gradient liniar? Există un alt mod care nu are astfel de limitări, deși, desigur, există anumite limitări în aplicarea sa. Amintiți-vă proprietatea clip-path de la secretul "Cum se face un diamant". CSS au traseele de tăiere caracteristică izbitoare: acestea vă permit să se amestece procente (prin care vom specifica dimensiunile elementului) cu absolut, oferind o flexibilitate incredibilă. De exemplu, elementul de tăiere cale cod cutoff la forma unui dreptunghi cu colțuri teșite dimensiune 20px (dacă este măsurată orizontal), după cum urmează:
fundal: # 58a;
clip-path: poligon (
20px 0, calc (100% - 20px) 0, 100% 20px,
100% calc (100% - 20px), calc (100% - 20px) 100%,
20px 100%, 0 calc (100% - 20px), 0 20px);
În ciuda brevetului, în acest fragment de cod principiile DRY nu sunt îndeplinite și aceasta devine una dintre cele mai mari probleme dacă nu folosiți un preprocesor. De fapt, acest cod reprezintă cea mai bună ilustrare a principiului WET din toate soluțiile pure CSS prezentate în această carte, deoarece trebuie să faceți opt (!) Modificări pentru a modifica dimensiunea unghiului. Pe de altă parte, fundalul poate fi schimbat cu o singură editare, așa că avem cel puțin așa ceva. Unul dintre avantajele acestei abordări este că putem folosi absolut orice fundal sau chiar tăia elemente swing, cum ar fi imagini. În Fig. 3.38 arată o imagine stilizată utilizând colțurile tăiate. Nici una dintre metodele anterioare nu permite atingerea unui astfel de efect. În plus, proprietatea clip-path susține animația și putem anima nu numai schimbarea unghiului, ci și tranzițiile între diferite forme.

Tot ce aveți nevoie este să utilizați o altă cale de tăiere. În plus față de prolixitatea și de sprijin browser-ul limitat, dezavantajul acestei soluții este că, dacă nu avea grijă de gramada suficient de largă, de asemenea, textul va fi tăiat, ca și în cazul în care tăierea element al componentelor sale nu au fost luate în considerare. În contrast, metoda gradientului permite textului să meargă doar dincolo de unghiuri de circumcizie (deoarece acestea sunt doar o parte din fundal), precum și metoda de frontieră imagine funcționează la fel ca un cadru convențional - poarta textul de pe o linie nouă.

Articole similare

• Cum să plasați o imagine de fundal în colțul din dreapta jos, vaden pro

• Determinarea permeabilității dielectrice și pierderii dielectrice a pierderii dielectrice tangente

• Cum se utilizează teodolitul pentru a măsura unghiul vertical al terenului

Trimiteți-le prietenilor: