Cara Membuat Pita CSS

Kami juga mengatur dimensi dasar dan warna latar belakang dengan CSS.

 .card background-color: beige; tinggi: 300px; margin: 40px; lebar: 500px;  

Bagian tengah pita

Kami akan menggunakan Variabel CSS (memungkinkan kami untuk menyimpan dan menggunakan kembali nilai CSS) yang disebut --hal untuk menyimpan nilai padding. Nilai dari lapisan properti menggunakan var (- p) sintaks untuk bantalan kiri dan kanan pita sehingga bisa mudah melebar. Itu --hal variabel nanti akan digunakan kembali beberapa kali; yang membuat kode kita fleksibel.

 .pita --p: 15px; warna latar: rgb (170.170.170); tinggi: 60px; padding: 0 var (- p); lebar: 100%;  

Pada tangkapan layar di bawah ini, Anda dapat melihat seperti apa tampilan demo Anda saat ini:

Menengahkan pita

Kita juga perlu pusat pita. Kita dorong ke kiri dengan ukuran bantalan (ditandai oleh --hal variabel) menggunakan posisi relatif.

 .pita --p: 15px; warna latar: rgb (170.170.170); tinggi: 60px; padding: 0 var (- p); posisi: relatif; kanan: var (- p); lebar: 100%;  

Demo yang diperbarui:

Sisi pita

Sekarang kita buat sisi kiri dan kanan pita yang seharusnya membungkuk di sekitar tepi kartu. Untuk melakukannya, kami menggunakan keduanya :sebelum dan :setelah elemen semu dari .pita.

Kedua elemen semu mewarisi warna latar belakang .pita, dan kami menggunakan filter: kecerahan (.5) aturan untuk menggelapkan warna mereka sedikit. Mereka juga benar-benar diposisikan dalam orangtua mereka (relatif diposisikan).

Lebar mereka harus menjadi sama dengan ukuran padding, dan kami menempatkan mereka ke ujung kiri dan kanan pita menggunakan kiri: 0 dan kanan: 0 aturan gaya.

 .pita: sebelum, .ribbon: after background-color: inherit; konten: "; tampilan: blok; filter: kecerahan (.5); tinggi: 100%; posisi: absolut; lebar: var (- p); .ribbon: sebelum kiri: 0; .ribbon: setelah  kanan: 0; 

Sekarang pita dengan sisi yang baru saja kita tambahkan terlihat seperti di bawah ini:

Miringkan sisi

Untuk membuat sisi-sisi pita terlihat bengkok, kita harus condongkan sisinya sebesar 45 °. Itu transform: skewy () Aturan CSS memiringkan elemen secara vertikal.

 .pita: sebelum kiri: 0; transform: skewy (45deg);  .ribbon: after right: 0; transform: skewy (-45deg);  

Seperti yang Anda bisa lihat ujung-ujungnya jangan sejajar setelah transformasi, jadi kita perlu tarik mereka ke bawah.

Sejajarkan sisi

Untuk tentukan panjang yang tepat dimana kita perlu menggerakkan sisi ke bawah, kita beralih ke trigonometri. Yang perlu kita temukan adalah x, sebagai y adalah lebar sisi (sama dengan ukuran padding dari .pita), dan sudutnya θ adalah 45 ° (sudut kemiringan).

Hasilnya x kemudian perlu dibelah dua, karena ada sisi kiri dan kanan juga.

Jika Anda menggunakan preprosesor CSS apa pun, periksa apakah ada berjemur fungsi, jika tidak lihat grafik tangen atau kalkulator cari tahu nilai singgung sudut. Kita beruntung juga tan 45 ° aku s 1, yang berarti nilai x sama dengan y dalam kasus kami.

 .pita: sebelum, .ribbon: after background-color: inherit; konten: "; tampilan: blok; filter: kecerahan (.5); tinggi: 100%; posisi: absolut; atas: calc (var (- p) / 2); lebar: var (- p); 

Sejak x harus dibelah dua, kami menggunakan calc () CSS berfungsi untuk melakukan pembagian --hal variabel.

Akhirnya kita perlu sejajarkan sisi-sisi sepanjang sumbu z juga, jadi mari kita tambahkan z-index: -1 memerintah ke sisi untuk letakkan di belakang bagian tengah pita.

 .pita: sebelum, .ribbon: after background-color: inherit; konten: "; tampilan: blok; filter: kecerahan (.5); tinggi: 100%; posisi: absolut; atas: calc (var (- p) / 2); lebar: var (- p); z- indeks: -1; 

Sekarang kami menyelaraskan sisi, pita CSS kami selesai.

Di bawah ini Anda dapat melihat demo langsung lagi, harap dicatat bahwa demo ini juga menggunakan beberapa stylings tambahan.