Bagaimana Membuat Tepi Skewed Dengan CSS

Dalam siaran ini, kita akan melihat bagaimana kita boleh membuat kesan kelebihan sudut (melintang) pada halaman web. Pada dasarnya, ia kelihatan seperti ini:

Mempunyai kelebihan sedikit bersudut harus membuat susunatur web kami kelihatan kurang tegar dan membosankan. Untuk melakukan silap mata ini, kami akan menggunakannya unsur-unsur pseudo :: sebelum ini dan :: selepas dan Transformasi CSS3.

Menggunakan Elemen Pseudo

Teknik ini menggunakan elemen pseudo :: sebelum ini dan :: selepas untuk sudut sudut unsur. Dalam contoh ini, kita akan menyesuaikan bahagian bawah.

 .blok ketinggian: 400px; lebar: 100%; kedudukan: relatif; latar belakang: lajur linear (ke kanan, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%);  .block :: after content: ", width: 100%, height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: left bottom; transform: skewY (3deg); 

Mari recap.

The ubah-asal menentukan koordinat unsur yang ingin kita ubah. Dalam contoh di atas yang kami nyatakan bahagian bawah kiri yang akan meletakkan koordinat permulaan di bahagian bawah kiri blok.

The mengubah: skewY (3deg); membuat :: selepas blok condong atau sudut pada 3 darjah. Oleh kerana kita menetapkan koordinat permulaan sebagai bahagian bawah kiri, bahagian bawah kanan blok menimbulkan 3 darjah. Jika kita menukarnya ubah-asal kepada bahagian bawah kanan dan sudut bawah kiri akan dinaikkan 3 darjah sebaliknya.

Anda boleh menambah latar belakang atau pepejal warna pepejal untuk melihat hasilnya.

Jadikan Ia Lebih Mudah dengan Sass Mixin

Untuk membuat ini lebih mudah, saya telah mencipta mixin Sass untuk menambah tepi bersudut, tolak sakit kepala daripada menangani kerumitan peraturan gaya. Dengan mixin berikut, anda dengan cepat dapat menentukan sisi - atas kiri, kanan atas, bawah kiri atau kanan bawah - untuk condong.

 @mixin angle-edge ($ pos-top: null, $ angle-top: null, $ pos-btm: null, $ angle-btm: null) width: 100%; kedudukan: relatif; latar belakang: lajur linear (ke kanan, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: sebelum, & :: selepas kandungan: "; lebar: 100%, ketinggian: 100%; kedudukan: mutlak; latar belakang: mewarisi; z-indeks: -1; post-top & :: before @if $ pos-top == 'topleft' top: 0; transform-origin: right top; = 'topright' atas: 0; ubah-asal: kiri atas; mengubah: skewY (- $ sudut-atas); @if $ pos-btm & :: after @if $ pos-btm == 'bottomleft' bottom: 0; transform-origin: right bottom; transform: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' bottom: 0; mengubah: skewY ($ angle-btm); 

Terdapat empat pemboleh ubah di dalam mixin. Dua pembolehubah pertama, $ pos-top dan $ sudut-atas, tentukan koordinat permulaan teratas dan juga ijazah. Kedua pembolehubah yang terakhir menentukan menyelaras dan juga ijazah untuk bawah sebelah.

Sekiranya anda mengisi semua empat pembolehubah, anda boleh melihat kedua-dua belah pihak - atas dan bawah - unsur.

Gunakan Sass @include sintaks untuk memasukkan campuran ke elemen. Anda boleh melihat contoh di bawah:

Untuk menambah kelebihan skewed kiri atas sebelah:

 .blok @include sudut tepi (topleft, 3deg);  

Untuk menambah kelebihan skewed kanan bawah sebelah:

 .blok @include angle-edge (bottomright, 3deg);  

Untuk menambah kelebihan skewed kiri atas dan kanan bawah sebelah:

 .blok @include sudut tepi (topleft, 3deg, bottomright, 3deg);  

Berikut ialah demo dengan campuran yang digunakan. Tukar kotak pilih untuk bertukar kepada gaya lain.

Itu sahaja!