CSS common style of drawing double arrow example code

Time:2020-11-27

1、 Call single arrow multiple times

The implementation of a single arrow – it is easy to implement double arrow. The above two principles of single arrow implementation have been introduced: frame rotation mode and double triangle coverage mode. This time, the border rotation is taken as an example to call the implementation of double arrow several times.
1. Realization of frame rotation with single arrow


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

在这里插入图片描述

2. Call single arrow multiple times


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

The effect picture is as follows:

在这里插入图片描述

2、 Rotate the border to draw Double arrows directly

Previously, the:: after pseudo element was used to draw a single arrow. Now, add the:: before pseudo element to draw a single arrow to realize the pure CSS drawing of 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 picture is as follows:

在这里插入图片描述

Double triangle overlay can also directly draw double arrow, but it is more difficult to implement, it is not as good as frame rotation

summary

This article about CSS common style drawing double arrow example code article introduced here, more related CSS drawing double arrow content, please search the previous article of developeppaer or continue to browse the related articles below, I hope you can support developeppaer more in the future!