CSS常用樣式之繪制雙箭頭的示例代碼

發(fā)布時(shí)間：2020-08-31 16:07:51 作者：奇詩

這篇文章主要介紹了CSS常用樣式之繪制雙箭頭的示例代碼，代碼簡單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、多次調(diào)用單箭頭

實(shí)現(xiàn)了單箭頭–就很容易實(shí)現(xiàn)雙箭頭了，上文已經(jīng)介紹2種實(shí)現(xiàn)單箭頭的原理：邊框旋轉(zhuǎn)方式、雙三角覆蓋方式。這次以邊框旋轉(zhuǎn)為例多次調(diào)用實(shí)現(xiàn)雙箭頭。
1、邊框旋轉(zhuǎn)單箭頭實(shí)現(xiàn)

.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、多次調(diào)用單箭頭

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

效果圖如下：

在這里插入圖片描述

二、旋轉(zhuǎn)邊框直接繪制雙箭頭

之前通過::after偽元素繪制單箭頭，現(xiàn)在再加上::before偽元素再繪制一個(gè)單箭頭就實(shí)現(xiàn)純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;
}

效果圖如下：

在這里插入圖片描述