Cara membuat bentuk reben CSS dengan satu elemen

Gunakan tips CSS moden untuk membuat bentuk reben CSS yang sejuk dengan hanya sedikit kod! Artikel ini akan menunjukkan cara membuat pelbagai bentuk reben menggunakan unsur tunggal dan pembolehubah CSS dan mencapai animasi hover yang indah tanpa memerlukan saiz tetap atau nombor sihir.

Mata utama:

Petua CSS moden menjadikannya mudah untuk membuat bentuk reben CSS, dikawal dengan hanya satu elemen dan pembolehubah CSS, tanpa memerlukan saiz tetap atau nombor sihir.
Membuat bentuk reben CSS melibatkan penentuan pembolehubah yang mengawal bentuk dan warna, menggunakan
• untuk menanam bentuk yang dikehendaki, dan menggunakan clip-path untuk membuat bahagian dilipat reben. box-shadow
unit CSS
• (sepadan dengan lh nilai) digunakan untuk mengawal ketinggian reben dan boleh digunakan bersama dengan line-height dan pembolehubah CSS untuk membuat animasi hover yang sangat baik. clip-path
Mewujudkan bentuk reben CSS berputar melibatkan menggunakan fungsi trigonometri baru dan pembolehubah CSS dan
• , menanam bahagian elemen utama dengan warna kecerunan, dan membuat bahagian-bahagian di belakang elemen utama dengan elemen pseudo. calc()

Artikel ini akan meneroka cara mendalam untuk membuat dua jenis bentuk reben CSS: reben dilipat dan reben berputar.

Buat bentuk reben CSS yang dilipat

Pertama, tentukan pembolehubah yang menentukan bentuk reben:

Seterusnya, terutamanya menggunakan atribut

. Angka berikut menunjukkan bentuk poligon untuk digunakan:

<code class="language-css">.ribbon {
  --r: 20px; /* 控制丝带的切口 */
  --s: 20px; /* 折叠部分的大小 */
  --c: #d81a14; /* 颜色 */
}</code>

clip-path

tambahkan margin dalaman untuk mengelakkan memotong teks, dan kemudian gunakan

:

clip-path Gunakan unit CSS LH

<code class="language-css">.ribbon {
  --r: 20px; 
  --s: 20px; 
  --c: #d81a14;

  line-height: 1.6; /* 控制高度 */
  padding-inline: 1.2lh calc(var(--r) + .2lh);
  background: var(--c);
  clip-path: polygon(1lh 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,100% 100%, 0 100%,0 100%); 
}</code>

Unit sesuai dengan nilai . Oleh kerana menggunakan teks satu baris,

menetapkan ketinggian kawalan,

bersamaan dengan ketinggian elemen. Dalam lh, adalah perlu untuk memotong bentuk segitiga isosceles. line-height line-height 1lh clip-path Untuk membuat seksyen yang runtuh, masih gunakan 1lh dan mengemas kini poligon sebelumnya. Keistimewaan

adalah bahawa ia boleh menanam kandungan "di luar" sempadan elemen. Dengan menambah

, bahagian yang dipotong luar boleh dilihat.

kemas kini clip-path untuk mengandungi empat mata baru, tiga daripadanya berada di luar elemen:

<code class="language-css">.ribbon {
  --r: 20px; /* 控制丝带的切口 */
  --s: 20px; /* 折叠部分的大小 */
  --c: #d81a14; /* 颜色 */
}</code>

Akhirnya, tambahkan kecerunan dan satu lagi box-shadow untuk menyelesaikan kesan bayangan.

(kod animasi hover dan kod terperinci untuk reben berputar diabaikan di sini, kerana panjangnya terlalu panjang, tetapi imej utama dan coretan kod dikekalkan. Kod lengkap boleh didapati di codepen, seperti ditunjukkan dalam teks asal Kesimpulan

Artikel ini meneroka ciri -ciri CSS moden seperti pembolehubah CSS, dan fungsi trigonometri, dan menggabungkannya untuk membuat bentuk reben sejuk. Untuk lebih banyak contoh, sila rujuk koleksi lengkap dalam pautan asal.

Atas ialah kandungan terperinci Cara membuat bentuk reben CSS dengan satu elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!