資訊專欄INFORMATION COLUMN
摘要：開發(fā)中，三角形的日常應(yīng)用，以三角形指示箭頭最為常見，其用來實(shí)現(xiàn)非常簡(jiǎn)單，熟悉了之后相比于引入或是背景圖片會(huì)是更好更靈活的選擇。這樣就實(shí)現(xiàn)三角形了。實(shí)心三角形箭頭實(shí)心三角形的原理就是一個(gè)三角形絕對(duì)定位到主體元素邊界處并連接起來。
web開發(fā)中，三角形的日常應(yīng)用，以三角形指示箭頭最為常見，其用CSS來實(shí)現(xiàn)非常簡(jiǎn)單，熟悉了之后相比于引入SVG或是背景圖片會(huì)是更好更靈活的選擇。
而三角箭頭一般而言，又分為兩種，一種是視覺上沒有邊框的，我們叫做實(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è)三角形絕對(duì)定位到主體元素邊界處并連接起來。
為了語義化，我們用單標(biāo)簽，三角形用偽類來實(shí)現(xiàn)。
把三角形顏色換成和主體元素一致的背景色就可以了。如下圖：
空心三角箭頭空心三角形的原理就是一個(gè)邊框顏色的三角形絕對(duì)定位到主體元素邊界處并連接起來，然后另一個(gè)主體元素背景色的三角形絕對(duì)定位并覆蓋到第一個(gè)三角形上面，關(guān)鍵的一點(diǎn)是第二個(gè)三角形相較于第一個(gè)三角形定位上偏移的距離應(yīng)等于邊框?qū)挾取?/p>
說得可能比較晦澀，看效果圖會(huì)更清楚明白（為了區(qū)分顯示，第一個(gè)三角形用的粉色，第二個(gè)白色）
把第一個(gè)三角形顏色換成邊框顏色，第二個(gè)三角形顏色換成背景顏色就可以了。
為了語義化，我們使用單標(biāo)簽，兩個(gè)三角形用before和after偽類來實(shí)現(xiàn)，因?yàn)閍fter偽元素會(huì)覆蓋before偽元素，所以after偽元素就是第二個(gè)三角形。
第二個(gè)三角形定位的偏移距離這是比較容易被忽略的一點(diǎn)！
為了視覺效果，也為了用戶體驗(yàn)，我們應(yīng)該將三角箭頭的邊框?qū)挾群椭黧w元素的邊框?qū)挾缺３忠恢隆?/p>
一般可能會(huì)有同學(xué)認(rèn)為第二個(gè)三角形的偏移值和主體元素邊框?qū)挾纫粯樱鋵?shí)是不對(duì)的。
第二個(gè)三角形相較于第一個(gè)三角形的偏移值其實(shí)應(yīng)該是主體元素邊框?qū)挾鹊?根號(hào)2"倍，約為1.414，為了方便可以按1.4倍計(jì)算。
下圖是原理圖：
假設(shè)主體元素邊框?qū)挾葹?px，所以第二個(gè)三角形相較于第一個(gè)三角形的偏移量應(yīng)為6px*1.4 = 8.4px
在線demo
本文首發(fā)于個(gè)人博客yoowin.me，歡迎訪問！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116629.html
摘要：之前一直在尋找這種空心三角箭頭終于知道了原理自己記錄一下順便分享給之前跟我一樣想要的擼友們第一種寫法利用常見的偽元素第二種寫法相對(duì)于比較簡(jiǎn)單簡(jiǎn)單不加這兩個(gè)屬性三角會(huì)比上一個(gè)略丑大家可以試一下 之前一直在尋找這種空心三角箭頭, 終于知道了原理! 自己記錄一下,順便分享給之前跟我一樣想要的擼友們~ 第一種寫法 利用常見的 after偽元素 ...
摘要：那問題來了，如何用來畫三角形呢別著急，先來看看我所遇到過的三角形。如下圖，有實(shí)心三角形，空心的，還有可以歸為三角形的小箭頭。畫一個(gè)三角形，首先想到的是如何畫三角形的形狀，然后給一個(gè)背景顏色。 在設(shè)計(jì)稿中，經(jīng)常會(huì)出現(xiàn)好多三角形，如果將三角形變成圖片，通過img標(biāo)簽的src或者background中的url來訪問，從前端性能方面來看這并不好。那問題來了，如何用css來畫三角形呢？別著急，先...
摘要：從零開始單排學(xué)設(shè)計(jì)模式的國(guó)服排位之旅，今天正式開啟目前段位定級(jí)賽這篇文章來總結(jié)下類圖，本來不打算講類圖的，因?yàn)槲以趯W(xué)習(xí)設(shè)計(jì)模式的時(shí)候，一遇到有關(guān)的就會(huì)自動(dòng)忽略，一看感覺就很復(fù)雜。關(guān)聯(lián)關(guān)系用實(shí)現(xiàn)箭頭來表示。 閱讀本文大概需要 3.5 分鐘。 本篇是設(shè)計(jì)模式系列的開篇，雖然之前也寫過相應(yīng)的文章，但是因?yàn)榉N種原因后來斷掉了，而且發(fā)現(xiàn)之前寫的內(nèi)容也很渣，不夠系統(tǒng)。 所以現(xiàn)在打算重寫，加上距離現(xiàn)...
摘要：因?yàn)橐蕾囮P(guān)系不強(qiáng)制，所以用虛線表示關(guān)聯(lián)關(guān)系關(guān)聯(lián)關(guān)系是類屬性依賴，很關(guān)鍵，所以使用實(shí)線表示。源碼地址類圖參考慕課網(wǎng)設(shè)計(jì)模式精講大話設(shè)計(jì)模式設(shè)計(jì)模式之類圖學(xué)習(xí)二類圖 類圖(Class diagram)主要用于描述系統(tǒng)的結(jié)構(gòu)化設(shè)計(jì)。類圖也是最常用的UML圖，用類圖可以顯示出類、接口以及它們之間的靜態(tài)結(jié)構(gòu)和關(guān)系。 0x01.類圖中的元素 1.類 Class / 接口 Interface sho...
閱讀 3750·2021-10-12 10:11
閱讀 2008·2019-08-30 15:53
閱讀 1614·2019-08-30 13:15
閱讀 2330·2019-08-30 11:25
閱讀 1831·2019-08-29 11:24
閱讀 1680·2019-08-26 13:53
閱讀 3551·2019-08-26 13:22
閱讀 1802·2019-08-26 10:24
