Cara Membuat Tepian yang Tusuk Dengan CSS
Dalam postingan ini, kita akan melihat bagaimana kita dapat membuat efek tepi miring (horizontal) pada halaman web. Pada dasarnya, ini terlihat seperti ini:
Memiliki tepi yang sedikit miring harus membuat tata letak web kami terlihat kurang kaku dan kusam. Untuk melakukan trik ini, kita akan menggunakan elemen semu ::sebelum dan ::setelah dan Transformasi CSS3.
Menggunakan Elemen Pseudo
Teknik ini menggunakan elemen-pseudo ::sebelum dan ::setelah untuk memiringkan tepi elemen. Dalam contoh ini, kita akan menyesuaikan tepi bawah.
.blok tinggi: 400px; lebar: 100%; posisi: relatif; latar belakang: linear-gradient (ke kanan, rgba (241.231.103,1) 0%, rgba (254.182.69,1) 100%); .block :: after content: "; width: 100%; tinggi: 100%; posisi: absolute; latar belakang: inherit; z-index: -1; bawah: 0; asal-asal: kiri bawah; transform: skewY (3deg);
Mari rekap.
Itu asal-usul menentukan koordinat elemen yang ingin kita ubah. Dalam contoh di atas kami tentukan kiri bawah yang akan menempatkan koordinat awal di sisi kiri bawah blok.
Itu transform: skewY (3deg); membuat ::setelah blok miring atau miring pada 3 derajat. Karena kami menetapkan koordinat awal sebagai kiri bawah, kanan bawah blok menaikkan 3 derajat. Jika kita menukar asal-usul untuk kanan bawah dan sudut kiri bawah akan dinaikkan 3 derajat sebagai gantinya.
Anda dapat menambahkan latar belakang warna solid atau gradien untuk melihat hasilnya.
Jadikan Lebih Mudah dengan Sass Mixin
Untuk membuat ini lebih mudah, saya telah membuat mixin Sass untuk menambahkan tepi miring, dikurangi sakit kepala karena berurusan dengan kompleksitas aturan gaya. Dengan mixin berikut, Anda dapat dengan cepat menentukan sisi - kiri atas, kanan atas, kiri bawah atau kanan bawah - untuk condong.
@mixin sudut-tepi ($ pos-top: null, $ sudut-atas: null, $ pos-btm: null, $ angle-btm: null) width: 100%; posisi: relatif; latar belakang: linear-gradient (ke kanan, rgba (241.231.103,1) 0%, rgba (254.182.69,1) 100%); & :: before, & :: after content: "; width: 100%; height: 100%; posisi: absolute; latar belakang: inherit; z-index: -1; transisi: mudahkan semua .5s; @jika $ pos-top & :: before @if $ pos-top == 'topleft' top: 0; transform-origin: kanan atas; transform: skewY ($ angle-top); @jika $ pos-top = = 'topright' atas: 0; transform-origin: kiri atas; transform: skewY (- $ angle-top); @jika $ pos-btm & :: setelah @if $ pos-btm == 'bottomleft' bawah: 0; transform-origin: kanan bawah; transform: skewY (- $ angle-btm); @jika $ pos-btm == 'bottomright' bawah: 0; transform-origin: kiri bawah; transform: skewY ($ angle-btm);
Ada empat variabel dalam mixin. Dua variabel pertama, $ pos-top dan $ angle-top, tentukan koordinat awal atas dan gelar. Dua variabel terakhir menentukan koordinat dan gelar Untuk bawah sisi.
Jika Anda mengisi keempat variabel, Anda dapat memiringkan kedua sisi - atas dan bawah - elemen.
Gunakan Sass @sertakan sintaks untuk memasukkan mixin ke suatu elemen. Anda dapat melihat contoh di bawah ini:
Untuk menambahkan tepi miring pada kiri atas sisi:
.blok @ termasuk sudut-tepi (topleft, 3deg);
Untuk menambahkan tepi miring pada kanan bawah sisi:
.blok @ termasuk sudut-tepi (kanan bawah, 3deg);
Untuk menambahkan tepi miring pada kiri atas dan kanan bawah sisi:
.blok @ termasuk sudut-tepi (topleft, 3deg, bottomright, 3deg);
Di bawah ini adalah demo dengan penerapan mixin. Ubah kotak pilih untuk beralih ke gaya lain.
Itu dia!
