css實現邊框三角形的方法：

<div class="triangle up"></div>
<div class="triangle right"></div>
<div class="triangle down"></div>
<div class="triangle left"></div>

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
}
/* up */
.up {
  border-width: 0 10px 10px;
  border-color: transparent transparent #f00;
}

/* right */
.right {
  border-width: 20px 0 20px 20px;
  border-color: transparent transparent transparent #f00;
}

/* down */
.down {
  border-width: 30px 30px 0;
  border-color: #f00 transparent transparent;
}

/* left */
.left {
  border-width: 40px 40px 40px 0;
  border-color: transparent #f00 transparent transparent;
}
 

或這種寫法：

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
}
/* up */
.up {
  border-width: 10px;
  border-top-width: 0;
  border-color: transparent;
  border-bottom-color: #f00;
}

/* right */
.right {
  border-width: 20px;
  border-right-width: 0;
  border-color: transparent;
  border-left-color: #f00;
}

/* down */
.down {
  border-width: 30px;
  border-bottom-width: 0;
  border-color: transparent;
  border-top-color: #f00;
}

/* left */
.left {
  border-width: 40px;
  border-left-width: 0;
  border-color: transparent;
  border-right-color: #f00;
}
 

以上程式碼效果如下：

總結：

1、元素的display: block | inline-block;

2、元素width，height為0；

3、向上三角形的border-top-width：0； border-bottom-color: #f00; 即向上方向時，上邊寬長度為0，與之相反的下邊框顏色不透明即可。其他方向依次類推（一句話總結即：同方向邊的邊框寬度為零其他三邊有寬度，對立方向的顏色不為透明其它三邊透明）