純粋な CSS で二重矢印を描画する方法 (コード例)-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2021-05-21 09:30:29

転載

2657 人が閲覧しました

この記事では、純粋な 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;
}

ログイン後にコピー

レンダリングは次のとおりです:
純粋な CSS で二重矢印を描画する方法 (コード例)
2. 単一矢印への複数の呼び出し

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

ログイン後にコピー

レンダリングは次のとおりです:
純粋な CSS で二重矢印を描画する方法 (コード例)

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