Advertisement
  1. Web Design
  2. SVG
Webdesign

3 Cara Membuat Sudut Miring Dengan SVG

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Dalam tutorial ini Anda akan belajar tiga cara untuk membuat sudut miring mudah menggunakan SVG. Untuk memulainya, kita akan menggunakan SVG sebaris, kemudian kita akan menggunakan latar belakang SVG pada elemen semu, sebelum menyelesaikan dengan campuran Sass. Mari selami!

Saksikan Screencast

Miring apa?

Ketika saya mengatakan "sudut miring" saya mengacu pada hal-hal seperti latar belakang di situs web Stripe:

httpsstripecom
Stripe.com

Atau lapisan pada website ini:

httpsskidpassetse
skidpasset.se

Ini akan cukup mudah untuk dibuat menggunakan aplikasi graphic; Anda dapat membuat desain, ekspor sebagai grafis tunggal, dan memuat ke halaman web Anda. Namun, jika Anda menginginkan lebih banyak fleksibilitas, Anda harus melupakan pendekatan itu. Mari kita lihat beberapa cara alternatif untuk mendapatkan sudut miring.

Penyegaran Cepat dalam Hand-Coding SVG

Sebelum kita melanjutkan, jika Anda perlu mengingatkan diri Anda sendiri tentang dasar-dasar di mana hand-coding SVG terkait, Kezz telah Anda bahas:

1. Inline SVG

Mari mulai dengan SVG, dalam wadah, di markup kita:

Kita akan kembali ke rincian dari apa yang kita lakukan dalam sekejap. Sekarang tambahkan beberapa style dasar untuk memberikan hero kita beberapa dimensi dan latar belakang gradien:

Itu memberi kita yang berikut:

Tapi mari kita bayangkan kita ingin memiliki ujung bawah sebagai sudut naik ke arah kanan. Kita akan melakukannya dengan SVG kita. Di dalamnya, kita akan membuat poligon dengan beberapa titik koordinat:

Sekarang Anda akan melihat segitiga hitam besar di kanan bawah halaman Anda. Melalui CSS kita, kita dapat menata segitiga itu agar sesuai dengan kebutuhan kita, mengisinya sama dengan latar belakang kita sehingga hero itu tampaknya telah diiris di bagian bawah:

Yang memberi kita:

2. Pseudo-Element + SVG

Pendekatan kedua kita meningkat pada yang pertama, dalam konten di dalam area abu-abu itu tidak akan terpotong oleh overlaying segitiga abu-abu. Kita akan kembali dengan div kontainer sederhana:

Kali ini kita akan mengontrol semua masking dari dalam CSS kita, dimulai dengan hero style yang kita gunakan di demo terakhir:

Sekarang kita akan menambahkan elemen pseudo ke hero kita, yang akan kita tambahkan SVG sebagai gambar latar belakang. Pertama, kita perlu menyandikan SVG kita sehingga kita benar-benar dapat menggunakannya dalam CSS. Jadi ambil kode SVG yang kita tulis terakhir kali, ubah nilainya menjadi 0,0 100,0 0,100 untuk membalikkannya, head ke URL-encoder untuk SVG, dan paste isinya ke dalam kotak:

URL encoder for SVG

Salin cuplikan Ready for CSS dan tempelkan ke dalam style pseudo-element:

Anda juga dapat menambahkan atribut fill='' jika Anda suka, setelah atribut viewBox misalnya. Tambahkan beberapa properti lagi untuk memposisikan dan mengukur pseudo-element:

Yang memberi kita ini:

Berkat warna Ziggy Stardust kita dapat dengan jelas melihat SVG kita seperti ini. Sekarang kita hanya perlu mewarnai segitiga (menggunakan atribut fill='') sehingga warnanya sama dengan ungu di bagian bawah gradien:

Pentingnya VW Units

Ada alasan mengapa kita menggunakan unit vw untuk ketinggian SVG kita: kita ingin sudut segitiga kita tetap konsisten tidak peduli apa lebar area pandang. Jika kita menggunakan unit px, tinggi segitiga tidak akan berubah untuk layar yang lebih sempit, yang akan membuat sudut segitiga lebih tajam. Cobalah sendiri!

3. Sass Mixin

Pendekatan terakhir ini menggunakan Sass mixin untuk melakukan semua pengangkatan berat, tetapi pada dasarnya mencapai apa yang kita lakukan pada contoh sebelumnya. Kunjungi Angled Edges GitHub repo, grab the mixin, dan sertakan dalam proyek Anda (saya akan menempelkan semuanya ke jendela SCSS dari proyek CodePen).

Selanjutnya, tambahkan teman lama kita hero div ke markup Anda. Tambahkan juga style dasar, sehingga kita mendapatkan efek gradien 300px.

Kemudian, dalam .hero kita tambahkan mixin:

Parameter yang kita butuhkan adalah sebagai berikut: kita perlu segitiga kita berada di outside hero, di bagian bottom. Posisi titik di mana sudut dimulai adalah lower right, warna yang kita inginkan adalah ungu #b06ab3, dan kemudian ketinggian segitiga akan menjadi 100. Keterbatasan ini adalah bahwa mixin tidak menerima nilai relatif untuk tinggi atau lebar.

Mixin kita terlihat seperti ini:

Dan ini adalah apa yang kita dapatkan:

Untuk detail lebih lanjut tentang parameter yang tersedia, periksa GitHub repo. Terima kasih kepada Joseph Fusco atas kerja kerasnya.

Kesimpulan

Jadi kita memilikinya; tiga metode untuk mencapai sudut miring. Masing-masing memiliki kelebihannya, dan berlatih masing-masing akan memberi Anda pemahaman yang kuat tentang bagaimana SVG dapat dimanipulasi untuk efek visual.

Selebihnya tentang SVG, Gradient, dan sudut dalam desain Web


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.