首先，通過一張圖分析一個div盒子由哪些部分組成：

通過上圖，我們得知，div可視區可以由width,height及border部分組成（此處不用padding）。在此，如果我們將width,height分別設定為0，border寬度不設定為0,則出現以下情形：

根據以上圖片所示，如果利用css3中transparent屬性即可實現透明色。

至此，我們得知，如果分別設定上下左右border,就能夠分別得到以下幾種三角形：
方向朝下三角形：

方向朝右三角形：
{ width:0; height:0; border-left: 50px solid black; border-top: 25px solid transparent; border-bottom: 25px solid transparent; }

方向朝上三角形：
{ width:0; height:0; border-bottom: 50px solid black; border-left: 25px solid transparent; border-right: 25px solid transparent; }

方向朝左三角形：
{ width:0; height:0; border-right: 50px solid black; border-top: 25px solid transparent; border-bottom: 25px solid transparent; }

方向西南三角形：
{ width:0; height:0; border-left: 50px solid black; border-bottom: 50px solid black; }

方向東南三角形：
{ width:0; height:0; border-right: 50px solid black; border-bottom: 50px solid black; }

方向東北三角形：
{ width:0; height:0; border-right: 50px solid black; border-top: 50px solid black; }

方向西北三角形：
{ width:0; height:0; border-top: 50px solid black; border-left: 50px solid black; }