Bagaimana untuk mencapai kesan segmentasi dengan sempadan lengkung 45 darjah?

Buat segmen sempadan lengkung 45 darjah: gabungan pintar CSS dan JavaScript

Dalam reka bentuk antara muka pengguna moden, segmen adalah elemen navigasi utama untuk meningkatkan pengalaman pengguna, terutamanya dalam aplikasi mudah alih dan laman web responsif. Artikel ini akan menunjukkan cara membuat segmen dengan sempadan lengkung sudut 45 darjah dan secara dinamik menukar arah lengkung dengan mengklik butang. Ini memerlukan penggunaan clip-path CSS dan logik interaktif JavaScript.

Langkah -langkah penjelasan terperinci

Pertama, bina struktur HTML asas:

<div class="wrap">
  <div class="tabs">
    <div class="tab" data-index="0">Tag 1</div>
    <div class="tab" data-index="1">Tag 2</div>
  </div>
  <div class="content-wrap"></div>
</div>

Seterusnya, gunakan CSS untuk menentukan gaya, clip-path adalah teras:

 .tabs {
  Paparan: Flex;
  Lebar: 100%;
  Limpahan: Tersembunyi;
  Sempadan-radius: 8px 8px 0 0; /* bahagian atas sudut bulat*/
  Latar Belakang: Linear-Gradient ( #CDD9FE, #E2E9FD); /* kecerunan latar belakang*/
}

.tab {
  Flex: 1 1 50%; /* Lebar pengedaran purata*/
  Ketinggian: 50px;
  kursor: penunjuk;
  Kedudukan: Relatif;
  Teks-Align: Pusat;
  Line-Height: 50px;
  Peralihan: Latar belakang warna 0.3s mudah; /* Peralihan lancar*/
}

.tab.active {
  latar belakang warna: #fff;
  Warna: #4185ef;
}

.tab.active :: sebelum { /* lengkung kiri* /
  Kandungan: '';
  Kedudukan: Mutlak;
  Atas: 0;
  Kiri: -50px;
  Ketinggian: 100%;
  lebar: 50px;
  Z-indeks: 2;
  latar belakang warna: #fff;
  Clip-Path: Polygon (0 100%, 50% 100%, 50% 0, 100% 0); /* Memudahkan laluan klip*/
}

.tab.active :: selepas { /* lengkung kanan* /
  Kandungan: '';
  Kedudukan: Mutlak;
  Atas: 0;
  Kanan: -50px;
  Ketinggian: 100%;
  lebar: 50px;
  Z-indeks: 2;
  latar belakang warna: #fff;
  Clip-Path: Polygon (0 0, 50% 0, 50% 100%, 100% 100%); / * Memudahkan laluan klip */
}

Dalam kod, kami menggunakan fungsi polygon() yang lebih mudah untuk menentukan clip-path untuk menjadikan kod lebih mudah dibaca. Harta transition memastikan peralihan warna latar belakang yang lancar.

Akhirnya, JavaScript mengendalikan peristiwa klik dan status pengaktifan:

 const tabs = document.QuerySelectorAll ('. Tab');
tabs.foreach (tab => {
  tab.addeventListener ('klik', () => {
    tabs.foreach (t => t.classlist.remove ('aktif'));
    tab.classlist.add ('aktif');
  });
});

Kod JavaScript ini menambah pendengar acara klik untuk setiap tag, mengeluarkan kelas active semua tag apabila diklik, dan kemudian menambah hanya kelas active untuk tag yang diklik, dengan itu secara dinamik menukar sempadan lengkung. Anda boleh menggunakan rangka kerja JavaScript yang lebih kompleks seperti Vue.js atau bertindak balas untuk menguruskan keadaan seperti yang diperlukan, tetapi untuk senario mudah, kod ini cukup.

Melalui langkah-langkah di atas, segmen dengan sempadan lengkung 45 darjah dan respons dinamik untuk klik acara selesai. Reka bentuk ini cantik dan praktikal, meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan segmentasi dengan sempadan lengkung 45 darjah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!