45度の曲線境界でセグメンテーション効果を達成する方法は？

45度の曲線ボーダーセグメントターを作成する：CSSとJavaScriptの巧妙な組み合わせ

最新のユーザーインターフェイスデザインでは、セグメントターは、特にモバイルアプリケーションやレスポンシブWebサイトで、ユーザーエクスペリエンスを強化するための重要なナビゲーション要素です。この記事では、45度の角度曲線境界を備えたセグメルターを作成し、ボタンをクリックして曲線方向を動的に切り替える方法を示します。これには、CSSのclip-path属性とJavaScriptのインタラクティブロジックを巧みに使用する必要があります。

ステップ詳細な説明

まず、基本的なHTML構造を構築します。

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

次に、CSSを使用してスタイルを定義します。 clip-pathがコアです。

 .tabs {
  ディスプレイ：Flex;
  幅：100％;
  オーバーフロー：隠し;
  Border-Radius：8px 8px 0 0; /*丸い角の上部*/
  背景：線形勾配（＃CDD9FE、＃E2E9FD）; /*バックグラウンドグラデーション*/
}

.tab {
  フレックス：1 1 50％; /*平均分布幅*/
  高さ：50px;
  カーソル：ポインター;
  位置：相対;
  テキストアライグ：センター;
  ラインハイト：50px;
  遷移：バックグラウンドカラー0.3s容易さ。 /*スムーズな遷移*/
}

.tab.active {
  バックグラウンドカラー：#fff;
  色：＃4185EF;
}

.tab.active :: before { /*左カーブ* /
  コンテンツ： '';
  位置：絶対;
  上：0;
  左：-50px;
  高さ：100％;
  幅：50px;
  z-index：2;
  バックグラウンドカラー：#fff;
  クリップパス：ポリゴン（0 100％、50％100％、50％0、100％0）; /* Clip-Pathを簡素化*/
}

.tab.active ::後{ /*右カーブ* /
  コンテンツ： '';
  位置：絶対;
  上：0;
  右：-50px;
  高さ：100％;
  幅：50px;
  z-index：2;
  バックグラウンドカラー：#fff;
  クリップパス：ポリゴン（0 0、50％0、50％100％、100％100％）; / * Clip-Pathを簡素化 */
}

コードでは、よりSimmer polygon()関数を使用してclip-pathを定義して、コードの読み取りを容易にします。 transitionプロパティにより、背景色のスムーズな遷移が保証されます。

最後に、JavaScriptはクリックイベントとアクティベーションステータスを処理します。

 const tabs = document.queryselectorall（ '。タブ'）;
tab.foreach（tab => {
  tab.addeventlistener（ 'click'、（）=> {
    tab.foreach（t => t.classlist.Remove（ 'Active'））;
    tab.classlist.add（ 'Active'）;
  }）;
}）;

このJavaScriptコードは、各タグのクリックイベントリスナーを追加し、クリックしたときにすべてのタグのactiveクラスを削除し、クリックしたタグのactiveクラスのみを追加し、それによりダイナミックな切り替え曲線境界線を追加します。 Vue.jsなどのより複雑なJavaScriptフレームワークを使用したり、必要に応じて状態を管理したりすることができますが、簡単なシナリオでは、このコードで十分です。

上記の手順を通じて、45度の曲線の境界線を備えたセグメントターとクリックイベントへの動的に応答するセグメントターが完了します。このデザインは美しく実用的であり、ユーザーエクスペリエンスを改善します。

以上が45度の曲線境界でセグメンテーション効果を達成する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。