web開發(fā)中，三角形的日常應(yīng)用，以三角形指示箭頭最為常見，其用CSS來實(shí)現(xiàn)非常簡單，熟悉了之后相比于引入SVG或是背景圖片會是更好更靈活的選擇。

而三角箭頭一般而言，又分為兩種，一種是視覺上沒有邊框的，我們叫做實(shí)心三角形；還有一種是視覺上有邊框的，而三角箭頭刨去邊框的部分又要與主體元素的背景顏色一致，我們叫做空心三角形。

言歸正傳，講一下怎樣實(shí)現(xiàn)的。

首先，講一下三角形的實(shí)現(xiàn)原理，熟悉的同學(xué)可以跳過這一步。

三角形實(shí)現(xiàn)原理

三角形的實(shí)現(xiàn)原理是寬高都不設(shè)置(即為0)，只設(shè)置邊框，如果四個(gè)邊框都設(shè)置寬度(border-width)、樣式(border-style)和顏色(border-color)，效果如圖：

上面是四個(gè)邊框border-width一樣時(shí)的效果，其實(shí)border-width是可以自己根據(jù)需求來變化的，如下圖效果：

上面看到的都是四個(gè)三角形，其實(shí)想實(shí)現(xiàn)單個(gè)的三角形只需把其他三個(gè)三角形的border-color設(shè)置為透明色transparent就可以了(2017年還用考慮IE6嗎)。

這樣就實(shí)現(xiàn)三角形了。

實(shí)心三角形箭頭

實(shí)心三角形的原理就是一個(gè)三角形絕對定位到主體元素邊界處并連接起來。

為了語義化，我們用單標(biāo)簽，三角形用偽類來實(shí)現(xiàn)。

把三角形顏色換成和主體元素一致的背景色就可以了。如下圖：

空心三角箭頭

空心三角形的原理就是一個(gè)邊框顏色的三角形絕對定位到主體元素邊界處并連接起來，然后另一個(gè)主體元素背景色的三角形絕對定位并覆蓋到第一個(gè)三角形上面，關(guān)鍵的一點(diǎn)是第二個(gè)三角形相較于第一個(gè)三角形定位上偏移的距離應(yīng)等于邊框?qū)挾取?/p>

說得可能比較晦澀，看效果圖會更清楚明白(為了區(qū)分顯示，第一個(gè)三角形用的粉色，第二個(gè)白色)

把第一個(gè)三角形顏色換成邊框顏色，第二個(gè)三角形顏色換成背景顏色就可以了。

為了語義化，我們使用單標(biāo)簽，兩個(gè)三角形用before和after偽類來實(shí)現(xiàn)，因?yàn)閍fter偽元素會覆蓋before偽元素，所以after偽元素就是第二個(gè)三角形。

第二個(gè)三角形定位的偏移距離

這是比較容易被忽略的一點(diǎn)！

為了視覺效果，也為了用戶體驗(yàn)，我們應(yīng)該將三角箭頭的邊框?qū)挾群椭黧w元素的邊框?qū)挾缺３忠恢隆?/p>

一般可能會有同學(xué)認(rèn)為第二個(gè)三角形的偏移值和主體元素邊框?qū)挾纫粯?#xff0c;其實(shí)是不對的。

第二個(gè)三角形相較于第一個(gè)三角形的偏移值其實(shí)應(yīng)該是主體元素邊框?qū)挾鹊?#34;根號2"倍，約為1.414，為了方便可以按1.4倍計(jì)算。

下圖是原理圖：

假設(shè)主體元素邊框?qū)挾葹?px，所以第二個(gè)三角形相較于第一個(gè)三角形的偏移量應(yīng)為6px*1.4 = 8.4px

本文首發(fā)于個(gè)人博客yoowin.me，歡迎訪問！

總結(jié)

以上是生活随笔為你收集整理的css空心三角形_CSS实现空心三角指示箭头的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。