Kako ustvariti poševne robove s CSS
V tej objavi bomo pogledali, kako lahko ustvarimo kotni robni učinek (vodoravno) na spletni strani. V bistvu izgleda približno tako:
Zaradi rahlega kotnega roba bi morala biti naša spletna postavitev videti manj toga in dolgočasno. Če želite narediti ta trik, bomo uporabili psevdoelementi :: pred in :: po in CSS3 Transform.
Uporaba psevdoelementov
Ta tehnika uporablja psevdoelemente :: pred in :: po za nagibanje robov elementov. V tem primeru bomo prilagodili spodnji rob.
.blok višina: 400px; širina: 100%; položaj: relativna; ozadje: linearni gradient (desno, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); širina: 100%; višina: 100%; pozicija: absolutna; ozadje: dedovanje; z-indeks: -1; spodaj: 0; izvor transformacije: levo spodaj, transformacija: skewY (3deg);
Preverimo.
The transformacije določa koordinate elementa, ki ga želimo pretvoriti. V zgornjem primeru smo določili levo spodaj ki bo postavil začetne koordinate na spodnji levi strani bloka.
The transform: skewY (3deg); naredi :: po blokirajte poševno ali kot na 3 stopinje. Ker smo določili začetno koordinato kot spodaj levo, se spodnji del bloka dvigne za 3 stopinje. Če zamenjamo transformacije do desno spodaj in spodnji levi kot se namesto tega dvigne za 3 stopinje.
Če želite videti rezultat, lahko dodate polno barvno ozadje ali gradient.
Naredite lažje s Sass Mixin
Da bi to olajšali, sem ustvaril mešanico Sass, ki je dodala kotne robove, brez glavobolov pri obravnavanju zapletenosti stilskih pravil. Z naslednjo kombinacijo lahko hitro določite stran - zgornji levo, zgoraj desno, spodaj levo ali spodaj desno -, da nagnete.
@mixin angle-edge ($ pos-top: null, $ angle-top: null, $ pos-btm: null, $ angle-btm: null) širina: 100%; položaj: relativna; ozadje: linearni gradient (desno, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: after, & :: after content: "; širina: 100%; višina: 100%; pozicija: absolutna; ozadje: dedovanje; z-indeks: -1; prehod: olajša vse .5s; @if $ pos-top & :: before @if $ pos-top == 'topleft' top: 0; transform-origin: desno zgoraj; transform: skewY ($ angle-top); @if $ pos-top = = 'topright' top: 0; transform-origin: levo zgoraj; transformacija: skewY (- $ angle-top); @if $ pos-btm & :: after @if $ pos-btm == 'bottomleft' (spodaj: 0; transform-origin: desno spodaj; transformacija: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' (spodaj: 0; transform-origin: levo spodaj; transform: skewY ($ angle-btm);
V mešanici so štiri spremenljivke. Prvi dve spremenljivki, $ pos-top in $ angle-top, določite zgornja začetna koordinata in stopnjo. Zadnji dve spremenljivki določata koordinata in stopnjo za spodaj strani.
Če zapolnite vse štiri spremenljivke, lahko oboje oboje - zgornji in spodnji - nagnete k elementu.
Uporabite Sass @ vključi sintakso za vstavljanje mešanice v element. Primeri lahko vidite spodaj:
Za dodajanje poševnega roba zgoraj levo stran:
.blok @include angle-edge (topleft, 3deg);
Za dodajanje poševnega roba spodaj desno stran:
.blok @include angle-edge (spodaj, 3deg);
Za dodajanje poševnega roba zgoraj levo in spodaj desno stran:
.blok @include angle-edge (topleft, 3deg, bottomright, 3deg);
Spodaj je predstavitev z uporabljenimi miksini. Spremenite polje za izbiro, da preklopite na drug slog.
To je to!
