CSS 共通スタイルで二重矢印を描画するサンプルコード

1. 単一の矢印への複数の呼び出し

単一の矢印を実装したら、二重矢印を実装するのは簡単です。上では、単一の矢印を実装するための 2 つの原則、つまり境界線の回転方法と二重三角形オーバーレイ方法を紹介しました。今回は、境界線の回転を例に、複数回呼び出して二重矢印を実装します。
1. 境界線の回転単一矢印の実装

.矢印右
  高さ: 120px;
  幅: 30ピクセル;
  :inline-block; を表示します。
  位置: 相対的;
}
.arrow-right::after {
  コンテンツ： "";
  高さ: 60px;
  幅: 60ピクセル;
  上: 12px;
  境界線の幅: 8px 8px 0 0;
  境界線の色: 青;
  境界線のスタイル: solid;
  変換: 行列(0.71, 0.71, -0.71, 0.71, 0, 0);
  位置: 絶対;
}

効果図は以下のとおりです。

ここに画像の説明を挿入

2. 単一の矢印への複数の呼び出し

<div>
	<span class="arrow-right"/>
    <span class="arrow-right"/>
</div>

効果図は以下のとおりです。

ここに画像の説明を挿入

2. 境界線を回転させて二重矢印を直接描く

以前は、::after 疑似要素を使用して単一の矢印を描画していました。現在は、::before 疑似要素を追加して別の単一の矢印を描画することで、純粋な CSS を使用して二重矢印を描画できます。

.矢印右
  高さ: 120px;
  幅: 30ピクセル;
  :inline-block; を表示します。
  位置: 相対的;
}
.arrow-right::before {
  コンテンツ： "";
  高さ: 60px;
  幅: 60ピクセル;
  上: 12px;
  左: 30px;
  境界線の幅: 8px 8px 0 0;
  境界線の色: 青;
  境界線のスタイル: solid;
  変換: 行列(0.71, 0.71, -0.71, 0.71, 0, 0);
  位置: 絶対;
}
.arrow-right::after {
  コンテンツ： "";
  高さ: 60px;
  幅: 60ピクセル;
  上: 12px;
  境界線の幅: 8px 8px 0 0;
  境界線の色: 青;
  境界線のスタイル: solid;
  変換: 行列(0.71, 0.71, -0.71, 0.71, 0, 0);
  位置: 絶対;
}

効果図は以下のとおりです。

ここに画像の説明を挿入

二重三角形オーバーレイ方式でも二重矢印を直接描画できますが、実装がより複雑です。境界回転方式ほど簡単に実装できるわけではありません。

要約する

CSS共通スタイルで二重矢印を描画するサンプルコードに関するこの記事はこれで終わりです。CSSで二重矢印を描画する関連コンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<: JavaScript における var と let の違い

>>: Ubuntu 14.04 に FTP サーバーをインストールするための実装手順