梯形

分別設定 border-color 上、右、下、左為不同的顏色，而中間的正方形 (白色部份) 為 height 與 width。

<div class="trapezoid"></div>

.trapezoid {
    border-color: #ff8000 #ff0000 #00ff00 #0000ff;
    border-style: solid solid solid solid;
    border-width: 30px;
 
    /* 設定 width、height 可更好理解原理 */
    height: 80px;
    width: 80px;
}

現在我們將 border-color 上、右、下，設定為 transparent (透明)，即可取得所需方向的梯形。

<div class="trapezoid-2"></div>

.trapezoid-2 {
    border-color: transparent transparent transparent #0000ff;
    border-style: solid solid solid solid;
    border-width: 30px;
 
    /* 設定 width、height 可更好理解原理 */
    height: 80px;
    width: 80px;
}

正三角形

與梯形不同的地方在於，將 height 與 width 設為 0，即可呈現正三角形。

<div class="triangle"></div>

.triangle {
    border-color: #ff8000 #ff0000 #00ff00 #0000ff;
    border-style: solid solid solid solid;
    border-width: 30px;
 
    /* 設定 width、height 可更好理解原理 */
    height: 0px;
    width: 0px;
}

現在我們將 border-color 上、右、下，設定為 transparent (透明)，即可取得所需方向的正三角形。

<div class="triangle-1"></div>

.triangle-1 {
    border-color: transparent transparent transparent #0000ff;
    border-style: solid solid solid solid;
    border-width: 30px;
 
    /* 設定 width、height 可更好理解原理 */
    height: 0px;
    width: 0px;
}

斜邊在盒子的對角線上

斜邊由設定 border-clolr 與 border-width 上、右二個顏色與方向的尺寸來呈現這種效果。

<div class="triangle2"></div>

.triangle2 {
    border-color: #ff0000 #00ff00 transparent transparent;
    border-style: solid solid solid solid;
 
    /* 設定邊框大小可拼湊出任意形狀的三角形 */
    border-width: 60px 60px 0px 0px;
 
    /* 設定 width、height 可更好理解原理 */
    height: 0px;
    width: 0px;
}

現在我們將 border-color 右，設定為 transparent，即可取得另一邊的三角形。

<div class="triangle2-2"></div>

.triangle2-2 {
    border-color: #ff0000 transparent transparent transparent;
    border-style: solid solid solid solid;
 
    /* 設定邊框大小可拼湊出任意形狀的三角形 */
    border-width: 60px 60px 0px 0px;
 
    /* 設定 width、height 可更好理解原理 */
    height: 0px;
    width: 0px;
}

直角三角形

將 border-color 上、右，設定為相同顏色，border-width 依上、下；左、右，各為一群組，相同群組須設定為相同尺寸。

<div class="triangle3"></div>

.triangle3 {
    border-color: #ff0000 #ff0000 transparent transparent;
    border-style: solid solid solid solid;
 
    /* 設定邊框（上、下；左、右）大小相同的數值，可拼湊出任意形狀的三角形 */
    border-width: 30px 8px;
 
    /* 設定 width、height 可更好理解原理 */
    height: 0px; 
    width: 0px; 
}

等腰三角形

僅設定 border-color 上，一個方向的顏色，border-width 依上、下；左、右，各為一群組，相同群組須設定為相同尺寸。

<div class="triangle4"></div>

.triangle4 {
    border-color: #ff0000 transparent transparent transparent;
    border-style: solid solid solid solid; 
 
    /* 設定邊框依上、下；左右，各為一群組，相同群組須設定為相同尺寸，調整尺寸可拼湊出任意形狀的三角形 */
    border-width: 45px 10px 45px 10px; 
 
    /* 設定 width、height 可更好理解原理 */
    height: 0px; 
    width: 0px;
}

對話框

下尖角

先設定元素的定位方式 position: relative;，在使用虛擬元素 ::after 來產生三角形，並以父元素定位，依此來調整三角形要出現的位置。

<div class="dialog-bottom"></div>

.dialog-bottom {
    background: #888888;
    height: 62px;
    margin-bottom: 10px;
    position: relative;
    width: 90px;
}
.dialog-bottom::after {
    border-color: #888888 #888888 transparent transparent;
    border-style: solid solid solid solid;
 
    /* 設定邊框大小可拼湊出任意形狀的三角形 */
    border-width: 13px 8px;
 
    bottom: -20px;
 
    /* 必須指定，才能顯示內容 */
    content: "";
 
    height: 0px;

 
    /* 必須指定，否則會變梯形 */
    position: absolute;
        left: 46px;
        left: 30px;
    width: 0px;
}

左尖角

基本上與上例相同，但這裡多使用了一個虛擬元素 ::before 用來蓋住另一個三角形，以取得另一種三角形。

<div class="dialog-left"></div>

.dialog-left {
    background: #888888;
    height: 90px;
    margin: 0 40px;
    position: relative;
    width: 50px;
}
.dialog-left::before {
    border-color: transparent #888888 #888888 transparent; 
    border-style: solid; 
    border-width: 20px;
 
    /* 必須指定，才能顯示內容 */
    content: "";
 
    height: 0px;
 
    /* 必須指定，否則會變梯形 */
    position: absolute;
        top: 35px;
        left: -40px;

    width: 0px;
}
.dialog-left::after {
    border-color: transparent #fff #fff transparent; 
    border-style: solid solid solid solid; 
    border-width: 8px 20px;
 
    /* 必須指定，才能顯示內容 */
    content: "";
 
    height: 0px;
 
    /* 必須指定，否則會變梯形 */
    position: absolute;
        top: 59px;
        left: -40px;

    width: 0px;

下三角 (邊框式)

與上例一樣都使用了二個虛擬元素，而本例的另一個則是用來蓋住另一個三角形，用來實現對話邊框。

HTML：

<div class="dialog-border-bottom"></div>

CSS：

.dialog-border-bottom {
    border: 5px solid #888888;
    height: 65px;
    margin-bottom: 10px;
    position: relative;
    width: 80px;
}
.dialog-border-bottom:before {
    border-color: #888888 transparent transparent; 
    border-style: solid solid solid; 
    border-width: 20px 20px 20px 20px; 
    bottom: -40px;
 
    /* 必須指定，才能顯示內容 */
    content: "";
 
    height: 0px;
 
    /* 必須指定，否則會變梯形 */
    position: absolute;
        left: 17px; 
 
    width: 0px;
}
.dialog-border-bottom:after {
    border-color: #fff transparent transparent; 
    border-style: solid solid solid solid; 
    border-width: 20px; 
 
    /* 必須指定，才能顯示內容 */
    content: "";
 
    height: 0px;
 
    /* 必須指定，否則會變梯形 */
    position: absolute;
        left: 17px;
        bottom: -33px;

    width: 0px;
}

參考

• CSS三角形的实现原理及运用-前端开发博客