How to draw a double arrow with pure CSS (code example)

This article will introduce to you how to draw a double arrow effect using pure CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

(Learning video sharing: css video tutorial)

1. Call a single arrow multiple times

After realizing a single arrow~~ it is easy to realize a double arrow. Two principles for realizing a single arrow have been introduced above: frame rotation method and double triangle coverage method. This time, we take border rotation as an example and call it multiple times to implement double arrows.

1. Frame rotation single arrow implementation

.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;
}

The rendering is as follows:

2. Multiple calls to the single arrow

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

The rendering is as follows:

2. Draw double arrows directly

Before drawing a single arrow through the ::after pseudo-element, now Add the ::before pseudo-element and draw a single arrow to realize drawing a double arrow using pure 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;
}

The rendering is as follows:

The double triangle overlay method can also draw double arrows directly, but it is more troublesome to implement. It is not as easy to implement as the border rotation method, so I won’t go into it.

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of How to draw a double arrow with pure CSS (code example). For more information, please follow other related articles on the PHP Chinese website!