Bagaimana untuk melaksanakan Segmenter dengan kesan lengkung 45 darjah melalui CSS dan JavaScript?

CSS dan JavaScript Buat segmen lengkung sudut 45 darjah

Dalam pembangunan web moden, reka bentuk UI yang indah adalah penting. Artikel ini akan menunjukkan cara menggunakan CSS dan JavaScript untuk membuat segmen dengan kesan lengkung sudut 45 darjah untuk meningkatkan estetika antara muka pengguna dan pengalaman interaktif.

Teknologi teras terletak dengan bijak menggunakan atribut clip-path CSS dan fungsi path . Dengan menentukan laluan tersuai, secara dinamik menyesuaikan sempadan mereka apabila tag diaktifkan, menghasilkan kesan lengkung yang lancar.

Coretan kod CSS berikut menunjukkan gaya utama:

 .tab.active: sebelum {
  Kandungan: '';
  Kedudukan: Mutlak;
  Atas: 0;
  Kiri: -50px;
  Ketinggian: 100%;
  lebar: 50px;
  Z-indeks: 2;
  latar belakang warna: #fff;
  Clip-Path: Path ('M 0,50 C 25,50 25,0 50,0 l 50, 50 Z');
}

.tab.active: selepas {
  Kandungan: '';
  Kedudukan: Mutlak;
  Atas: 0;
  Kanan: -50px;
  Ketinggian: 100%;
  lebar: 50px;
  Z-indeks: 2;
  latar belakang warna: #fff;
  Clip-Path: Path ('M 0,0 C 25,0 25,50 50,50 L 0, 50 Z');
}

clip-path: path(...) mentakrifkan laluan lengkung di sebelah kiri dan kanan melalui fungsi path . m bermaksud bergerak ke titik permulaan, c bermaksud C sebagai lengkung bezier padu, dan l bermaksud garis lurus. Apabila tag diaktifkan (kelas active ), kedua-dua elemen pseudo ( :before dan :after ) menjana sempadan lengkung.

Kod JavaScript bertanggungjawab untuk menguruskan status pengaktifan tag:

 fungsi initdata () {
  kembali {
    ActiveIndex: 1,
    OnTabClick (indeks) {
      this.activeIndex = index
    }
  }
}

Kod berasaskan Alpine.js ini mengendalikan acara klik tag dengan ringkas. Fungsi onTabClick mengemas kini activeIndex , dengan itu mengawal penggunaan gaya CSS dan menyedari penukaran kesan lengkung.

Melalui pemprosesan peristiwa clip-path CSS dan JavaScript, kami dapat mewujudkan segmenters dengan kesan lengkung sudut 45 darjah, sambil menambah sentuhan kemodenan ke aplikasi web anda.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan Segmenter dengan kesan lengkung 45 darjah melalui CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!