在網上你可以隨意搜到很多用css的border屬性畫的圖形，比如麵包屑導航、三角形等等，畫這些圖形可能結合了css的偽類:before 、 :after等，當然也可能沒有，這並不影響我今天要分享的，當初作為新手的我看到這些程式碼覺得很神奇但並不能理解，今天，在相對理解的基礎上我自己畫出了這些三角形更是覺得神奇於是來分享。

首先我們看一個三角形

想象它是由一個正方形變來的，如何變呢，先來看看這個正方形

為了解釋的更加清晰，我們給正方形的四個角標上記號

假設DC邊，也就是底邊，不在了，然後我們將DC兩個點連起來，先假設他們的結合點在曾經DC邊的終點上，你看，我們是不是得到了一個三角形 ？

我們的三角形大致是用了這個原理，當然不是上圖的這種轉換，我們讓一個 width 和 height 都為0的div，通過border來畫這個三角形，如果需要畫一個箭頭向下的三角形，是不是讓底邊的border消失就好了呢 ？ 同時，只給頂部的border一個顏色，其他的border都為透明色transparent

為了觀察清楚原div，我們先還原一部，假設所有的border的color為red
然後看看這個div

依次改變border的color就會看清每個border
然後根據需要顯示對應的border-color就好了

然後根據需要我們就可以畫出自己想要的圖形

以下是畫三角形的css程式碼參考

        .arrow-down{
            width: 0px;
            height: 0px;
            border-width: 30px 30px 0 30px;
            border-color: transparent;
            border-style: solid;
            border-top-color: red;

        }
        .arrow-up{
            width: 0px;
            height
 
: 0px;
            border-width: 0 30px 30px 30px;
            border-color: transparent;
            border-style: solid;
            border-bottom-color: red;


        }
        .arrow-left{
            width: 0px;
            height: 0px;
            border-width: 30px 30px 30px 0px;
            border-color: transparent;
            border-style: solid;

            border-right-color: red;
        }
        .arrow-right{
            width: 0px;
            height: 0px;
            border-width: 30px 0 30px 30px;
            border-color: transparent;
            border-style: solid;
            border-left-color: red;

        }

        .triangle-upright{
            width: 0px;
            height: 0px;
            border-width: 30px 30px 30px 30px;
            border-color: rebeccapurple;
            border-style: solid;
            border-left-color: transparent;
            border-bottom-color: transparent;

        }

        .triangle-upleft{
            width: 0px;
            height: 0px;
            border-width: 30px 30px 30px 30px;
            border-color: rebeccapurple;
            border-style: solid;
            border-right-color: transparent;
            border-bottom-color: transparent;

        }

        .triangle-downright{
            width: 0px;
            height: 0px;
            border-width: 30px 30px 30px 30px;
            border-color: rebeccapurple;
            border-style: solid;
            border-left-color: transparent;
            border-top-color: transparent;

        }

        .triangle-downleft{
            width: 0px;
            height: 0px;
            border-width: 30px 30px 30px 30px;
            border-color: rebeccapurple;
            border-style: solid;
            border-right-color: transparent;
            border-top-color: transparent;

        }