您好,登錄后才能下訂單哦!
小編給大家分享一下純CSS怎么繪制雙箭頭,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
實(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>
效果圖如下:
之前通過(guò)::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; }
效果圖如下:
雙三角覆蓋這種方式也能直接繪制雙箭頭,但是實(shí)現(xiàn)比較麻煩,不如邊框旋轉(zhuǎn)方式好實(shí)現(xiàn)就不講了。
css的基本語(yǔ)法是:1、css規(guī)則由選擇器和一條或多條聲明兩個(gè)部分構(gòu)成;2、選擇器通常是需要改變樣式的HTML元素;3、每條聲明由一個(gè)屬性和一個(gè)值組成;4、屬性和屬性值被冒號(hào)分隔開。
以上是“純CSS怎么繪制雙箭頭”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。