CSS によりプロセスナビゲーション効果を実現します。具体的な内容は以下のとおりです。 ::tip オンライン プロセス ナビゲーション効果には純粋な CSS を使用します。 この記事では、フレックスレイアウトを統一的に採用していますが、他のレイアウトを使用しても実現できます。コア原則は変わりません::: ## 方法 1: 切り取り この方法は IE ではサポートされていません clip-path: polygon() を使用して三角形を直接描画します。計算する必要があるのは、おおよそのパーセンテージだけです。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <meta name="ビューポート" content="width=デバイス幅"> <スタイル> .nav-box { ディスプレイ: フレックス; リストスタイル: なし; フォントサイズ: 14px; } .nav-box li { 空白: ラップなし; 色: #019fe9; 背景: #edf9ff; カウンター増分: listCounter; クリップパス: ポリゴン(87% 0, 100% 50%, 87% 100%, 0 100%, 13% 50%, 0 0); 行の高さ: 40px; パディング: 0 25px; 右マージン: -10px; } .nav-box li::before { コンテンツ: counter(listCounter) "-"; } .nav-box .active { 色: #fcfefe; 背景: #009fe9; } .nav-box .active ~ li { 色: #8e8e8e; 背景: #ebedf0; } </スタイル> </head> <本文> <!-- コンテナ --> <ol class="nav-box"> <li><a href="">ルールの説明</a></li> <li><a href="">イベントに参加する</a></li> <li class="active" aria-current="true"><a href="">抽選に参加する</a></li> <li><a href="">賞品の配布</a></li> <li><a href="">結果を表示</a></li> </ol> </本文> </html> ## 方法 2: 転位を使用する flex + transform : skewX(); は ie9+ でプレフィックス -ms- を実装します + このメソッドは before と after も完全に活用します。 + 原則 1 --- before + after を使用して上半分と下半分に分割します <Badge text="[このメソッドには、最初の末尾を別々に完了する必要があるという欠陥があります]" type="warn"/> + 原則 2 --- before + after を使用して左半分と右半分に分割します <Badge text="[このメソッドは、最初の before または after のみを処理して、最初の問題を回避する]" type="success"/> <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <meta name="ビューポート" content="width=デバイス幅"> <スタイルスコープ> .nav-box { ディスプレイ: フレックス; リストスタイル: なし; フォントサイズ: 14px; } .nav-box li { 空白: ラップなし; 色: #019fe9; パディング: 0 15px 0 25px; 行の高さ: 40px; 左マージン: 3px; 位置: 相対的; zインデックス: 99; } .nav-box li:最初の子{ 背景: #edf9ff; 右マージン: 7px; } .nav-box .active:first-child{ 背景: #019fe9; } .nav-box li:first-child::before, .nav-box li:first-child::after{ 左: 7px; } .nav-box li::before, .nav-box li::after { コンテンツ: ""; 位置: 絶対; 左: 0; 高さ: 50%; 幅: 100%; 背景: #edf9ff; Zインデックス: -1; } .nav-box li::before { 上: 0; 変換: skew(30deg); } .nav-box li::after { 下部: 0; 変換: skew(-30deg); } .nav-box .active { 色: #d7effb; } .nav-box .active::before, .nav-box .active::after { 背景: #009fe9; } .active ~ li { 色: #909091; } .active ~ li::before、 .active ~ li::after { 背景: #ebedf0; } </スタイル> </head> <本文> <!-- コンテナ --> <ol class="nav-box"> <li class="active">1-ルールの説明</li> <li>2- 活動に参加する</li> <li>3- 抽選に参加する</li> <li>4- 賞品の配布</li> <li>5-参加結果</li> </ol> </本文> </html> ## 方法 3: 境界線の三角形 前面と背面の三角形を生成するには、border を使用します。欠点は、インデックスを自分で定義する必要があることです。CSS カウンターはラベルなしでは使用できません。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <meta name="ビューポート" content="width=デバイス幅"> <スタイル> .nav-box{ 高さ:40px; 行の高さ:40px; リストスタイル: なし; パディング:0; ディスプレイ:フレックス; フォントサイズ:14px; オーバーフロー: 非表示; } .nav-box li{ パディング:0 10px 0 10px; 右マージン: 18px; 空白: ラップなし; 位置:相対; 色:#019fe9; 背景:#edf9ff; } /* 三角形 */ .nav-box li:before、.nav-box li:after{ コンテンツ:''; 位置:絶対; 幅: 0; 高さ: 0; } .nav-box li:before{ 右: -16px; 境界線: 透明な実線; 境界線の幅: 20px 0 20px 16px; 左境界線の色:#edf9ff; zインデックス:2; } /* 白線 */ .nav-box li:after{ 上: -3px; 左: -18px; 境界線: 実線 #edf9ff; 境界線の幅: 23px 0 23px 18px; 左境界線の色: 透明; zインデックス: 1; } .nav-box .active{ 色: #fff; 背景:#009fe9; } .nav-box .active ~ li{ 色:#8e8e8e; 背景:#ebedf0; } .nav-box .active:before{ 左境界線の色:#009fe9; } .nav-box .active:after{ 境界線の色: #009fe9; 左境界線の色: 透明; } .nav-box .active ~ li:before{ 左境界線の色:#ebedf0; } .nav-box .active ~ li:after{ 境界線の色: #ebedf0; 左境界線の色: 透明; } </スタイル> </head> <本文> <ol class="nav-box"> <li>1-ルールの説明</li> <li>2- 活動に参加する</li> <li class="active">3- 抽選に参加する</li> <li>4- 賞品の配布</li> <li>5-参加結果</li> </ol> </本文> </html> 要約する 上記は、エディターが紹介したプロセスナビゲーション効果(3つの方法)のCSS実装です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます! |
<<: MySQL 分離列とプレフィックスインデックスの使用の概要
>>: Docker ベースの ELK ログ システムを構築する方法
この記事の例では、Vueの具体的なコードを共有し、zipファイルをダウンロードして参考にしています。...
目次render.js 部分create-context.js 部分差分部分Reactのソースコード...
目次1. スイッチ2. whileループ3. Do/Whileループ3. 文字列を数値に変換する1....
最近、ビジネス側から、一部のユーザー情報の挿入に失敗し、エラー メッセージが「不正な文字列値:&qu...
<br />関連記事: ハイパーリンクを表示して開く方法症状<br />ユー...
目次序文スタイル機能説明初期化コードイベントリスナーの追加リスナーツールバーモニターテーブル行ツール...
目次1. ハッシュテーブルの原理2. ハッシュテーブルの概念3. ハッシュ競合問題1. チェーンアド...
ボタン (input, button) を記述すると、IE では次のようになります。単語数が増えると...
目次Docker入門Docker環境のインストールDockerイメージの共通コマンド検索ミラー画像を...
<スタイル タイプ="text/css">コードをコピーコードは次の...
この記事では、以下の環境をテストします。 CentOS 7 64 ビット 最小 MySQL 5.7 ...
アイデア: 最初にランダムに並べ替えてからグループ化します。 1. テーブルを作成します。 テーブル...
IE で CSS3 を使用して角を丸くする方法を探していたときに、例を見つけました。まだテストして...
Docker には 3 つの基本概念が含まれています。イメージ: Docker イメージはルート フ...
目次コンポーネントの分解左パネル右パネル入力パラメータの分解小道具スロット具体的な実装ドラッグする方...