純CSS如何繪製雙箭頭（程式碼範例）-css教學-PHP中文網

純CSS如何繪製雙箭頭（程式碼範例）

青灯夜游

發布： 2021-05-21 09:30:29

轉載

2657 人瀏覽過

本篇文章為大家介紹一下使用純CSS繪製雙箭頭效果的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

純CSS如何繪製雙箭頭（程式碼範例）

（學習影片分享：css影片教學）

一、多次呼叫單箭頭

#實現了單箭頭~~就很容易實現雙箭頭了，上文已經介紹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如何繪製雙箭頭（程式碼範例）

二、直接繪製雙箭頭

之前透過::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如何繪製雙箭頭（程式碼範例）
雙三角覆蓋這種方式也能直接繪製雙箭頭，但是實現比較麻煩，不如邊框旋轉方式好實現就不講了。