我們平常打開某個網站的時候，常常會發現網頁上很多導航或者指示條會使用一個三角符號去指向內容，效果簡潔美觀，甚至很多前端面試中也會提及如何在網頁上實現一個三角符號，這里給出一個很簡單使用的實現方式。
首先看看哪些網站都使用了這種方式：
淘寶（注意到右邊那個三角符號）
網易（導航條三角符號應用）
搜狐
這種例子多不勝數，此處不一一舉例了。下面說如何實現：
實現方式實際上很簡單，主要利用了偽元素和定位來完成：
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.div1{
background: red;
width: 100px;
height: 100px;
position: relative;
}
.div1:after{
position: absolute;
bottom: 0;
width: 0;
height: 0;
left: 50%;
margin-left: -10px;
content: " ";
border-bottom: 10px solid #000000 ;
border-left: 10px solid transparent ;
border-right: 10px solid transparent ;
}
.div1:before{
position: absolute;
top: -10px;
width: 0;
height: 0;
left: 50%;
margin-left: -10px;
content: " ";
border-bottom: 10px solid #000000 ;
border-left: 10px solid transparent ;
border-right: 10px solid transparent ;
}
</style>
</head>
<body>
<div class="div1">
（）
</div>
</body>
</html>
這里首先定義一個div，給它加上一個class叫做div1，主要是用來給它自身定義背景，寬高，並且需要加上相對定位，因為它里面的三角符號需要在它的基礎上進行絕對定位；
在這個div1 class上面加一個before或者after的偽元素，這個就是三角符號，主要利用了它的border屬性，定義三個border，讓border-left和border-right透明，讓border-top（或border-bottom）非透明，取決於你想將這個三角符號設置成什么顏色。
最后需要給這個三角符號進行絕對定位，如果你要將它放在這個div的最下面，可以設置bottom：0，如果你要做一個導航類的三角讓它在div頂部並指向某元素，可以采用負的top值進行實現，其為負的border的寬度，就可以讓它和div連在一起。
同時，要設置這個偽元素寬高為0，內容為空，剩下的工作就是調整它的位置了，效果如下：
