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

效果圖如下：

2、多次調用單箭頭

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

效果圖如下：

二、直接繪制雙箭頭

之前通過::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的基本語法是什么

css的基本語法是：1、css規則由選擇器和一條或多條聲明兩個部分構成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。

以上是“純CSS怎么繪制雙箭頭”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！