CSSのクリップパス属性を使用して、セグメルターの45度曲線効果を実現する方法は？

エレガントな45度の角度セグメントター：CSS clip-pathを使用してスムーズな相互作用を作成する

[ボタンをクリックするときに45度の角度でセグメントターをスムーズに曲線に変換する方法]をクリックすると、別のボタンをクリックすると元の状態に戻りますか？これにより、視覚的な魅力が向上するだけでなく、ユーザーエクスペリエンスも最適化します。この記事では、CSSのclip-path属性を使用し、パス関数を組み合わせてこの効果を完全に達成します。

次のコードの例は、このような動的な45度曲線セグメントターを作成する方法を示しています。

 


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>45度角度曲線セグメントター</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>

コードでは、 clip-path: path('M 0,50 C 25,50 25,0 50,0 L 50, 50 Z'); 45度の曲線の経路を定義します。 JavaScriptを介してactiveクラスを制御して、[トグル]をクリックするときにアニメーション効果を実現します。この方法はシンプルで効率的で、セグメンテーションデザインをより魅力的にします。効果を確認するためにclip-pathをサポートする最新のブラウザが必要です。

以上がCSSのクリップパス属性を使用して、セグメルターの45度曲線効果を実現する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。