用CSS建立小三角形問題（筆試題常考）

筆試題中經常遇到用css實現某個div邊框新增三角形問題，掌握一點，合理利用div的邊框，當div有寬有高時，邊框就是不起眼的邊框，當div的寬高為0時，邊框就是乙個小方塊，把剩下的三個邊透明就是神奇的三角形了。

然後就是考察css的：before和：after偽元素，此類問題一般分為兩種型別，即實心和空心問題，如圖所示。

下圖中dom結構均為：<

div

id=」demo」

>

div>

1、  實心三角

此類問題，一般給出背景顏色（多數為深色），沒有整體圖形的邊框，比較容易下手。思路很簡單，整體div背景色，確定長寬，相對定位，再用：after偽元素在div後新增內容（空格），設定寬度為0，確定邊框寬度，絕對定位就行。

#demo

#demo:after

對於空心三角，設計思路和實心三角類似，可以看成兩個實心三角，外層大三角是設定為整體邊框顏色的實心三角，內層小三角是設定為白色的實心三角，外層寬度大於內層寬度，視覺上就是空心三角。關鍵就是：before和：after偽元素分別對應外層大三角和內層小三角，以及邊框大小計算。注意視覺上先看到的是：after偽元素樣式，然後是：before偽元素樣式，即當兩者重合時，：after偽元素在最先看到。

對於上圖的空心三角形設計（border-width:2px），**如下：

#demo

/*小三角*/
#demo:after
/*大三角*/
#demo:before

利用 before after 寫小三角形

之前寫的三角形一直在同乙個顏色，沒有邊框的樣式。如下 css 如下 tri up tri left tri right tri down 若要寫以下的小三角，則需要用到偽類 before after demo 方框的樣式 demo after,demo before demo after 此處是乙個...

css實現帶小三角形的邊框

主要方法是使用偽元素before和after，之前已經總結過偽元素before after用法，它們效果相當於在標籤的內部放置乙個最前或者最後的標籤，新增的標籤同樣的能夠繼承父元素的屬性，那麼通過偽元素就可以組裝拼出對話方塊的小三角 原理圖 第一步 第二步 設定浮動，讓before和after三角形...

用CSS繪製三角形

歸根結底，用css繪製三角形，就是利用邊框 border 特性進行繪製 平時我們用border可能用的很多，但是一般都會統一設定所有邊框的顏色，很少研究每個方向的邊框具體樣式是怎樣的。現在先來看乙個簡單的例子，我們分別設定每個方向的邊框的顏色，元素寬高是100px 效果 那麼，如果把元素的寬高設定為...