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

一、多次調(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)邊框直接繪制雙箭頭
之前通過(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)就不講了
總結(jié)
到此這篇關(guān)于CSS常用樣式之繪制雙箭頭的示例代碼的文章就介紹到這了,更多相關(guān)css繪制雙箭頭內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 這篇文章主要介紹了HTML外部樣式表如何引入CSS樣式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2020-12-10
- 這篇文章主要介紹了CSS3中常用的樣式【基本文本和字體樣式】,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-20
- 這篇文章主要介紹了編程式處理Css樣式的示例代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-20
- 這篇文章主要介紹了CSS 選擇所有子元素添加樣式的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)2020-09-02
詳解中文字體在CSS樣式中font-family對(duì)應(yīng)的英文名稱
這篇文章主要介紹了中文字體在CSS樣式中font-family對(duì)應(yīng)的英文名稱,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-21CSS實(shí)現(xiàn)鼠標(biāo)懸停改變其他標(biāo)簽樣式的示例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)鼠標(biāo)懸停改變其他標(biāo)簽樣式的示例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-19解決ElementUI自定義CSS樣式不生效的問(wèn)題
這篇文章主要介紹了解決ElementUI自定義CSS樣式不生效的問(wèn)題,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-22