只要前端入了門的小伙伴們想必大家一定見過這種組件：
上面畫圈圈的部分有個(gè)三角形间景，一般這種popup或者tooltip都會(huì)存在這么一個(gè)小三角形瑞佩，下面來介紹兩種實(shí)現(xiàn)方式
方案一：border
這種三角形常見的方式是通過 border屬性來實(shí)現(xiàn)。由于border有上下左右四個(gè)邊亏拉，像上圖我們可以：
.arrow{
height: 0px;
width: 0px;
border: 10px solid transparent;
border-bottom-color: #fff;
}
根據(jù)各個(gè)邊框?qū)挾鹊牟煌梢詫?shí)現(xiàn)不同的三角形组力，
.arrow{
height: 0px;
width: 0px;
border: 10px solid transparent;
border-bottom-color: #fff;
border-width:0px 10px 15px 10px
}
.arrow{
....
border-width: 0px 10px 10px 0px
...
}
并且一般我們寫這種沒有業(yè)務(wù)含義的裝飾時(shí)推薦使用:after柏卤、:before 偽類來實(shí)現(xiàn)冬三，使dom保持整潔。
.arrow:after{
content: " ";
border: 10px solid transparent;
border-bottom-color: #fff;
border-width: 0px 10px 15px 10px;
}
方案二：clip-path
當(dāng)然除了使用border來實(shí)現(xiàn)缘缚，我們也可以使用clip-path來實(shí)現(xiàn)勾笆；
簡單介紹：
clip-path屬性使用裁剪方式創(chuàng)建元素的可顯示區(qū)域。區(qū)域內(nèi)的部分顯示桥滨，區(qū)域外的隱藏窝爪。戳我了解
我們可以：
clip-path: polygon(50% 0px, 100% 50% , 0px 50%)
上面polygon中的參數(shù)是各個(gè)點(diǎn)的坐標(biāo)（x軸坐標(biāo)，y軸坐標(biāo)）蒲每，
以元素的Content+Padding的寬高作為百分比的基準(zhǔn)纷跛，左上角作為坐標(biāo)原點(diǎn)按點(diǎn)連線，圖形出現(xiàn)在第四象限里邀杏；
當(dāng)然我們不止可以用它來畫三角形贫奠，其他任何的圖形都可以拿它來實(shí)現(xiàn)。不知道大家用沒用過ps淮阐，這個(gè)屬性和ps中的‘鋼筆’工具很相似叮阅。
我們也可以通過使用path刁品，將svg路徑傳入：
clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');
總結(jié)
綜上所述泣特，感覺這個(gè)clip-path功能很強(qiáng)大，能繪制出很多不同的形狀挑随。
但是但是但是Ｗ茨！兜挨！
border屬性兼容性極好基本不存在問題膏孟；clip-path屬性兼容性就差很多，如果是內(nèi)部使用的B端項(xiàng)目還是很推薦的拌汇。還有其他常見的實(shí)現(xiàn)方式評(píng)論區(qū)見~~
另附上caniuse：
