CSS實現空心三角指示箭頭

makeFoxPlay 發布于2019-08-30 15:53 / 1978人閱讀

摘要：開發中，三角形的日常應用，以三角形指示箭頭最為常見，其用來實現非常簡單，熟悉了之后相比于引入或是背景圖片會是更好更靈活的選擇。這樣就實現三角形了。實心三角形箭頭實心三角形的原理就是一個三角形絕對定位到主體元素邊界處并連接起來。

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

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

言歸正傳，講一下怎樣實現的。

首先，講一下三角形的實現原理，熟悉的同學可以跳過這一步。

三角形實現原理

三角形的實現原理是寬高都不設置（即為0），只設置邊框，如果四個邊框都設置寬度（border-width）、樣式（border-style）和顏色（border-color），效果如圖：

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

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

這樣就實現三角形了。

實心三角形箭頭

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

為了語義化，我們用單標簽，三角形用偽類來實現。

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

空心三角箭頭

空心三角形的原理就是一個邊框顏色的三角形絕對定位到主體元素邊界處并連接起來，然后另一個主體元素背景色的三角形絕對定位并覆蓋到第一個三角形上面，關鍵的一點是第二個三角形相較于第一個三角形定位上偏移的距離應等于邊框寬度。

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

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

為了語義化，我們使用單標簽，兩個三角形用before和after偽類來實現，因為after偽元素會覆蓋before偽元素，所以after偽元素就是第二個三角形。

第二個三角形定位的偏移距離

這是比較容易被忽略的一點！

為了視覺效果，也為了用戶體驗，我們應該將三角箭頭的邊框寬度和主體元素的邊框寬度保持一致。

一般可能會有同學認為第二個三角形的偏移值和主體元素邊框寬度一樣，其實是不對的。

第二個三角形相較于第一個三角形的偏移值其實應該是主體元素邊框寬度的"根號2"倍，約為1.414，為了方便可以按1.4倍計算。

下圖是原理圖：

假設主體元素邊框寬度為6px，所以第二個三角形相較于第一個三角形的偏移量應為6px*1.4 = 8.4px

在線demo

本文首發于個人博客yoowin.me，歡迎訪問！

云服務器 GPU云服務器 html畫三角箭頭 css三角 css三角形 JS輕松實現CSS設置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116629.html

CSS3 用border寫空心三角箭頭 (兩種寫法)

摘要：之前一直在尋找這種空心三角箭頭終于知道了原理自己記錄一下順便分享給之前跟我一樣想要的擼友們第一種寫法利用常見的偽元素第二種寫法相對于比較簡單簡單不加這兩個屬性三角會比上一個略丑大家可以試一下之前一直在尋找這種空心三角箭頭, 終于知道了原理! 自己記錄一下,順便分享給之前跟我一樣想要的擼友們~ 第一種寫法利用常見的 after偽元素 ...

Kyxy 2019-08-30 13:15 評論0 收藏0
如何用css畫三角形

摘要：那問題來了，如何用來畫三角形呢別著急，先來看看我所遇到過的三角形。如下圖，有實心三角形，空心的，還有可以歸為三角形的小箭頭。畫一個三角形，首先想到的是如何畫三角形的形狀，然后給一個背景顏色。在設計稿中，經常會出現好多三角形，如果將三角形變成圖片，通過img標簽的src或者background中的url來訪問，從前端性能方面來看這并不好。那問題來了，如何用css來畫三角形呢？別著急，先...

Yuqi 2019-08-30 13:06 評論0 收藏0
從零開始單排學設計模式「UML類圖」定級賽

摘要：從零開始單排學設計模式的國服排位之旅，今天正式開啟目前段位定級賽這篇文章來總結下類圖，本來不打算講類圖的，因為我在學習設計模式的時候，一遇到有關的就會自動忽略，一看感覺就很復雜。關聯關系用實現箭頭來表示。閱讀本文大概需要 3.5 分鐘。本篇是設計模式系列的開篇，雖然之前也寫過相應的文章，但是因為種種原因后來斷掉了，而且發現之前寫的內容也很渣，不夠系統。所以現在打算重寫，加上距離現...

Loong_T 2019-08-16 15:04 評論0 收藏0
設計模式之UML類圖

摘要：因為依賴關系不強制，所以用虛線表示關聯關系關聯關系是類屬性依賴，很關鍵，所以使用實線表示。源碼地址類圖參考慕課網設計模式精講大話設計模式設計模式之類圖學習二類圖類圖(Class diagram)主要用于描述系統的結構化設計。類圖也是最常用的UML圖，用類圖可以顯示出類、接口以及它們之間的靜態結構和關系。 0x01.類圖中的元素 1.類 Class / 接口 Interface sho...

xiao7cn 2019-08-16 17:39 評論0 收藏0