您好,登錄后才能下訂單哦!
本篇文章為大家展示了如何使用css中各種方向小箭頭,代碼簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
在開發(fā)頁面的時(shí)候,遇到很多的列表都需要用到箭頭,可以直接用圖片作背景鋪墊,純CSS也能實(shí)現(xiàn),并且沒有兼容性顧慮,不用CSS3,相比而言,比圖片更好用。
原理:一個(gè)高寬相等的正方形,選取你所需要的某一邊,截取之,就是一個(gè)梯形,當(dāng)高寬都為0,且其他邊為透明顏色時(shí),一個(gè)三角形就出來了
梯形代碼:
html: <div class="arrow"></div> css: arrow{ width:10px; height:10px; border:10px solid #000; border-left-color:orange; }
把高寬設(shè)為0,其他邊為透明顏色,三角形出來了:
html: <div class="arrow"></div> css: arrow{ width:0; height:0; border: 10px solid transparent; border-left-color: orange;//左箭頭 }
在開發(fā)中,可以利用偽類,定位實(shí)現(xiàn),不改變dom結(jié)構(gòu),簡(jiǎn)潔優(yōu)雅。content提供給三角形的位置,這個(gè)屬性不能少。
html: <div class="arrow">文字文字</div> css: div{ position:relative; arrow{ width:0; height:0; border: 10px solid transparent; border-left-color: orange; position:absolute; content:''; }
現(xiàn)在追求平面化設(shè)計(jì),還有另一種三角線箭頭,更受歡迎。
設(shè)置兩個(gè)偽類,前一個(gè)偽類覆蓋至另一個(gè)了偽類,留出一些線出來就好:
html: <div class="arrow">文字文字</div> CSS: div { position: relative; } .arrow:after,.arrow:before { width: 0; height: 0; border: 10px solid transparent; border-left-color: orange; position: absolute; content: ""; } .arrow:before{ top: 0; left: 70px;//根據(jù)實(shí)際情況調(diào)整 border-left-color: white; }
上述內(nèi)容就是如何使用css中各種方向小箭頭,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(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)容。