純粋な CSS で二重矢印を描画する方法 (コード例)

この記事では、純粋な CSS を使用して二重矢印効果を描画する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

(学習ビデオ共有: css ビデオ チュートリアル)

1. 1 つの矢印を複数回呼び出します

単一の矢印を実現した後は、二重の矢印を実現するのは簡単です。単一の矢印を実現するための 2 つの原則、フレーム回転法と二重三角形カバレッジ法を上で紹介しました。今回は境界線の回転を例に、それを複数回呼び出して二重矢印を実装します。

1. フレーム回転単一矢印の実装

.arrow-right{
  height: 120px;
  width: 30px;
  display :inline-block;
  position: relative;
}
.arrow-right::after {
  content: "";
  height: 60px;
  width: 60px;
  top: 12px;
  border-width: 8px 8px 0 0;
  border-color: blue;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
}

レンダリングは次のとおりです:

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

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

レンダリングは次のとおりです:

2. 二重矢印を直接描画します

を介して単一の矢印を描画する前に、次のようにします。 :after 疑似要素、今度は ::before 疑似要素を追加し、単一の矢印を描画して、純粋な CSS を使用して二重矢印の描画を実現します。

.arrow-right{
  height: 120px;
  width: 30px;
  display :inline-block;
  position: relative;
}
.arrow-right::before {
  content: "";
  height: 60px;
  width: 60px;
  top: 12px;
  left: 30px;
  border-width: 8px 8px 0 0;
  border-color: blue;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
}
.arrow-right::after {
  content: "";
  height: 60px;
  width: 60px;
  top: 12px;
  border-width: 8px 8px 0 0;
  border-color: blue;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
}

レンダリングは次のとおりです:

二重三角形オーバーレイ メソッドは二重矢印を直接描画することもできますが、実装はより面倒です。境界線の回転方法については説明しません。

プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 ！

以上が純粋な CSS で二重矢印を描画する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。