CSSでプロセスナビゲーション効果を実現する(3つの方法)

CSSでプロセスナビゲーション効果を実現する(3つの方法)

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 ログ システムを構築する方法

推薦する

CentOS7でFTPサーバーを設定する方法

FTP は主にファイル転送に使用され、Linux では vsftpd で実装されるのが一般的です。F...

Nodejs での WeChat アプレット メッセージ プッシュの実装

サブスクリプションメッセージテンプレートを選択または作成するWeChat アプレットにログインし、「...

ハッシュテーブルのJavaScript実装の詳細な説明

目次1. ハッシュテーブルの原理2. ハッシュテーブルの概念3. ハッシュ競合問題1. チェーンアド...

mysql 5.7.20 win64 のインストールと設定方法

mysql-5.7.20-winx64.zipインストール手順のないインストール パッケージ: ht...

CSS でテキストカラーグラデーションを実装する 3 つの方法

Web フロントエンド開発のプロセスでは、UI デザイナーはグラデーション テキストを使用したデザイ...

HTML の div、td、p およびその他のコンテナーでの強制改行と非改行の実装

1. 改行を強制せず、省略記号で終了します。コードをコピーコードは次のとおりです。 <div ...

MySQLでよく使われる演算子と関数の概要

まずデータ テーブルを作成しましょう。 使用テスト; テーブル「従業員」を作成します( emp_no...

mysql replace into の使用法の詳細な説明

replace ステートメントは、一般的に insert ステートメントに似ています。ただし、テーブ...

MySQL での mysqladmin 日常管理コマンドの概要 (必読)

mysqladmin ツールの使用形式は次のとおりです。 mysqladmin [オプション] コ...

ドロップダウンメニューとスライドメニューのデザイン例

ドロップダウン メニューやスライド メニューを使用している Web サイトをたくさん見つけたので、私...

CSS クラスと ID の一般的な命名規則

ページの公開名: #wrapper - ページの外側の端が全体のレイアウト幅を制御します#conta...

JavaScript が重複したネットワークリクエストを防ぐ方法の例

序文開発中は、インターフェース要求の繰り返しによってさまざまな問題が発生することがよくあります。ネッ...

RHEL8 で静的 IP アドレスを設定するさまざまな方法の簡単な分析

Linux サーバーで作業している場合、ネットワーク カード/イーサネット カードに静的 IP アド...

CocosCreatorでゲームコントローラーを使用する方法

目次1. シーンレイアウト2. ハンドルリスナーを追加する1. イベントの変更を監視する2. 座標設...

Windows2008 64 ビット システムでの MySQL 5.7 グリーン バージョンのインストール チュートリアル

序文この記事では、MySQL 5.7 グリーン バージョンのインストール チュートリアルを紹介します...