CSS İle Eğriltilmiş Kenarlar Nasıl Oluşturulur
Bu yayında, web sayfasında açılı kenar efekti (yatay olarak) nasıl oluşturabileceğimize bakacağız. Temel olarak, şuna benzer bir şey görünüyor:
Hafif açılı bir kenara sahip olmak, web düzenimizin daha az sert ve donuk görünmesini sağlamalıdır. Bu numarayı yapmak için kullanacağız. sözde elemanları ::önce ve ::sonra ve CSS3 Dönüşümü.
Sahte Öğeleri Kullanma
Bu teknik sözde unsurları kullanır ::önce ve ::sonra elemanın kenarlarını eğmek için. Bu örnekte, alt kenarı ayarlayacağız.
.blok yükseklik: 400 piksel; genişlik:% 100; pozisyon: göreceli; arkaplan: doğrusal gradyan (sağa, rgba (241,231,103,1)% 0, rgba (254,182,69,1)% 100); .block :: after content: "; genişlik:% 100; yükseklik:% 100; konum: mutlak; arka plan: devral; z-index: -1; alt: 0; dönüşümü kökeni: sol alt; dönüşümü: skewY (3deg);
Tekrar özetleyelim.
dönüşümü menşeli Dönüştürmek istediğimiz öğenin koordinatlarını belirtir. Yukarıdaki örnekte belirlediğimiz sol alt bu başlangıç koordinatlarını bloğun sol alt tarafına koyacaktır.
dönüşümü: çarpıkY (3deg); Yapar ::sonra eğriltme veya açıyı 3 derecede engelle. Başlangıç koordinatını sol alt olarak belirttiğimiz için, bloğun sağ alt kısmı 3 derece yükseltir. Eğer değiştirirsek dönüşümü menşeli için sağ alt ve sol alt köşe bunun yerine 3 derece kaldırılacak.
Sonucu görmek için düz renk arka plan veya degrade ekleyebilirsiniz..
Sass Mixin ile Daha Kolay Yapın
Bunu kolaylaştırmak için açılı kenarları eklemek, stil kurallarının karmaşıklığı ile başa çıkmak için baş ağrıları ekleyerek bir Sass karışımı hazırladım. Aşağıdaki miks ile hızlıca sola, sağa, sola veya sağa - sola doğru belirleyebilirsiniz.
@mixin köşebent ($ pos-top: null, $ açı-üst: null, $ pos-btm: null, $ açı-btm: null) genişlik:% 100; pozisyon: göreceli; arkaplan: doğrusal gradyan (sağa, rgba (241,231,103,1)% 0, rgba (254,182,69,1)% 100); & :: before, & :: after content: "; genişlik: 100%; yükseklik: 100%; konum: mutlak; arkaplan: devral; z-index: -1; geçiş: tüm kolaylığı .5s; @if $ pos-top & :: önce @ if $ pos-top == 'topleft' top: 0; dönüşümün kökeni: sağ üst; dönüşüm: skewY ($ açı-üst); @if $ pos-top = = 'topright' top: 0; dönüşüm orijini: sol üst; dönüşüm: skewY (- $ angle-top); @if $ pos-btm & :: after @if $ pos-btm == 'alt bölüm' alt: 0; dönüşüm orijini: sağ alt; dönüşümü: skewY (- $ açı-btm); @if $ pos-btm == 'dip hakkı' alt: 0; dönüşüm orijini: sol alt; dönüşümü: skewY ($ angle-btm);
Karışımda dört değişken vardır. İlk iki değişken, $ Pos üstü ve $ Açı üstü, belirtin ilk başlangıç koordinatı ve derece. İkinci iki değişken koordinat ve derece için alt yan.
Dört değişkeni de doldurursanız, öğenin her iki tarafını da açabilirsiniz - öğenin üst ve alt -.
Sass kullanın @Dahil etmek Karışımı bir elemana yerleştirmek için sözdizimi. Aşağıdaki örnekleri görebilirsiniz:
Çarpık kenar eklemek için Sol üst yan:
.blok @ iç içe açı kenarı (üst boşluk, 3 derece);
Çarpık kenar eklemek için sağ alt yan:
.blok @include açı kenarı (dipte, 3deg);
Çarpık kenar eklemek için Sol üst ve sağ alt yan:
.blok @çerçek açılı kenar (üst boşluk, 3 derece, dipte 3 derece);
Aşağıda, uygulanan karışımlarla ilgili demo verilmiştir. Başka bir stile geçmek için seçim kutusunu değiştirin.
Bu kadar!
