Example code for drawing double arrows in CSS common styles

1. Multiple calls to single arrow

Once a single arrow is implemented, it is easy to implement a double arrow. Two principles for implementing a single arrow have been introduced above: border rotation method and double triangle overlay method. This time, we use the border rotation as an example to call multiple times to implement the double arrow.
1. Border 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 effect diagram is as follows:

2. Multiple calls to single arrow

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

The effect diagram is as follows:

2. Draw double arrows directly by rotating the border

Previously, a single arrow was drawn using the ::after pseudo-element. Now, by adding the ::before pseudo-element and drawing another single arrow, pure CSS can be used to draw a double arrow.

.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 effect diagram is as follows:

The double triangle overlay method can also directly draw double arrows, but it is more complicated to implement. It is not as easy to implement as the border rotation method.

Summarize

This is the end of this article about the sample code for drawing double arrows in CSS common styles. For more relevant CSS drawing double arrow content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!