在開發過程中，我們可能會經常遇到這樣的需求樣式：
這張圖是擷取京東訊息通知的彈出框，我們可以看到右上方有個三角形的氣泡效果，這只是其中一種，三角形的方向還可以是上、下、左、右。
通過截圖可以發現，氣泡由正三角形和圓角長方形組成，於是可以通過組合來形成三角形氣泡的效果，下面我們通過三種方式進行實現。
實現方式： 1、通過.9圖進行實現； 2、通過shape方式實現； 3、通過自定義view的方式實現；
實現邏輯：
1、通過.9圖進行實現
這種方式就不用說了吧，找你們ui小姐姐切乙個.9圖，使用即可，不過這種方式的需要佔一定體積哦。
2、通過shape方式實現
<?xml version="1.0" encoding="utf-8"?>
複製**
<?xml version="1.0" encoding="utf-8"?>
複製**
<?xml version="1.0" encoding="utf-8"?>
>
複製**
<?xml version="1.0" encoding="utf-8"?>
>
複製**
3、通過自定義view的方式實現
由於是比較簡單這裡就不講解每個怎麼搞了，可以複製過去直接用
複製**
public class ********view extends view
public ********view(context context, @nullable attributeset attrs)
public ********view(final context context, final attributeset attrs, final int defstyleattr)
private void init()
@override
protected void onmeasure(int widthmeasurespec, int heightmeasurespec)
if (mheight == 0 || heightmode != measurespec.exactly)
setmeasureddimension(mwidth, mheight);
}@override
protected void ondraw(canvas canvas)
mpath.close();
canvas.drawpath(mpath, mpaint);
}}複製**
通過自定義的方式可以搞定四個方向，而且在**中也可以使用，動態新增，動態改變顏色，還是比較好的方式。
到這裡就完成啦.
本文在開源專案： 中已收錄，裡面包含不同方向的自學程式設計路線、面試題集合/面經、及系列技術文章等，資源持續更新中…
css 修改三角形大小 css實現三角形
最近的乙個專案頁面中，有很多三角形icon，在不考慮ie相容性下，使用了css實現三角形，記錄一下 1 實心三角形，利用transparent實現 1 設定線條寬50px，div 寬高0 width 0px height 0px border right 100px solid red border...
CSS border實現三角形
css盒模型 乙個盒子包括 margin border padding content。上下左右邊框交界處出呈現平滑的斜線。利用這個特點，通過設定不同的上下左右邊框寬度或者顏色可以得到小三角，小梯形等。調整寬度大小可以調節三角形形狀。示例1 一般情況下，我們設定盒子的寬高度及上下左右邊框，會呈現如下...
CSS border實現三角形
css盒模型 乙個盒子包括 margin border padding content。上下左右邊框交界處出呈現平滑的斜線。利用這個特點，通過設定不同的上下左右邊框寬度或者顏色可以得到小三角，小梯形等。調整寬度大小可以調節三角形形狀。示例1 一般情況下，我們設定盒子的寬高度及上下左右邊框，會呈現如下...