Bagaimana cara menggunakan atribut clip-path CSS untuk mencapai kesan lengkung 45 darjah segmen?

Segmen sudut 45 darjah elegan: Gunakan CSS clip-path untuk membuat interaksi yang lancar

Bagaimana untuk menjadikan segmen lancar berubah menjadi lengkung pada sudut 45 darjah apabila mengklik butang, dan kemudian kembali ke keadaan asalnya apabila mengklik butang lain? Ini bukan sahaja meningkatkan daya tarikan visual, tetapi juga mengoptimumkan pengalaman pengguna. Artikel ini akan menggunakan atribut clip-path CSS dan menggabungkan fungsi laluan untuk mencapai kesan ini dengan sempurna.

Contoh kod berikut menunjukkan cara membuat segmen lengkung 45 darjah yang dinamik:

 


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Segmen Sudut Sudut 45 darjah</title>
<style>
.wrap {
  background-color: #eee;
  width: 375px;
  margin: 0 auto;
  padding: 10px;
}

.tabs {
  display: flex;
  width: 100%;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(#cdd9fe, #e2e9fd);
}

.tab {
  flex: 0 0 50.1%;
  height: 50px;
  cursor: pointer;
  position: relative;
  text-align: center;
  line-height: 50px;
}

.tab.active {
  background-color: #fff;
  color: #4185ef;
}

.tab.active:before { /* 左侧曲线 */
  content: '';
  position: absolute;
  top: 0;
  left: -50px;
  height: 100%;
  width: 50px;
  z-index: 2;
  background-color: #fff;
  clip-path: path('M 0,50 C 25,50 25,0 50,0 L 50, 50 Z');
}

.tab.active:after { /* 右侧曲线 */
  content: '';
  position: absolute;
  top: 0;
  right: -50px;
  height: 100%;
  width: 50px;
  z-index: 2;
  background-color: #fff;
  clip-path: path('M 0,0 C 25,0 25,50 50,50 L 50, 50 Z');
}

.content-wrap {
  min-height: 200px;
  background-color: #fff;
}
</style>


<div class="wrap" x-data="initData()">
  <div class="tabs">
    <template x-for="index in 2">
      <div :class="{ 'active': activeIndex == index }" class="tab" x-text="'标签'   index"></div>
    </template>
  </div>
  <div class="content-wrap"></div>
</div>

<script>
function initData() {
  return {
    activeIndex: 1,
    onTabClick(index) {
      this.activeIndex = index;
    }
  };
}
</script>

Dalam Kod, clip-path: path('M 0,50 C 25,50 25,0 50,0 L 50, 50 Z'); mentakrifkan jalan lengkung 45 darjah. Kawal kelas active melalui JavaScript untuk mencapai kesan animasi apabila mengklik togol. Kaedah ini mudah dan cekap, menjadikan reka bentuk segmentasi anda lebih menarik. Ingat, anda memerlukan pelayar moden yang menyokong clip-path untuk melihat kesannya.

Atas ialah kandungan terperinci Bagaimana cara menggunakan atribut clip-path CSS untuk mencapai kesan lengkung 45 darjah segmen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!