實現後如下圖所示
這個設計的原理很簡單：
- 1，就是給一個塊級標籤的寬和高都設置爲0，如果你要用行級標籤，先設置行級標籤的display爲block後，就可以設置寬和高都爲0。（本次演示使用i標籤）
i{
display:block;
}
- 2，接下來是設置border邊框，設置border邊框具有一定的寬度，這樣就能依靠邊框自己膨脹成一個矩形的模樣
i{
display:block;
width:0;
height:0;
border:20px solid black;
}
效果如下圖所示：
- 3，我們給有邊框設置邊框顏色爲透明色就會發現出現了一個缺口
![在這裏插入圖片描述]()
依次類推，將右，下，左這3條變都設置爲透明，就會發現只有上面一個邊框了，然後所謂的三角形就呈現出來了
![在這裏插入圖片描述]()
全部代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<style>
i{
display:block;
width:0;
height:0;
border:20px solid black;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
</style>
</head>
<body>
<i></i>
</body>
</html>