html:

<article>
        <h1>Html</h1>
        <p>At W3Schools...more.</p>
    </article>

css：

body {
    background-color: #d4676a;
    margin: 50px;
}
article {
    width: 400px;
    padding: 20px 40px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow
 
: 5px 7px 1px rgba(0,0,0,.1);
    position: relative;/*三角形定位，子絕父相*/
}
article h1 {
    color: #d4676a;
}
article p {
    color: #666;
}
/*繪製三角形*/
article::after {
    content: '';    
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: #390 #f30 #36f #ff3;/*顏色分別為綠色，紅色，藍色，黃色*/
 

    position: absolute;
    bottom: -40px;/*三角形的邊框寬20px,上下邊框之和是40px,所以值為-40px*/
}

下面開始製作三角形，如下圖：

上圖css程式碼如下：

article::after {
    其他程式碼省略...
    border-color: #390 transparent transparent;
}

繼續調整三角形，變成白色：

css程式碼如下：

article::after {
    其他程式碼省略...
    border-color: #fff transparent transparent;/*白色三角形*/
 

}

把三角形放在左邊：

css程式碼如下：

article::after {
    其他程式碼省略...
    left: -40px;
    top: 35px;
    border-color: transparent #fff transparent transparent;/*白色三角形*/
}

可以調節三角形的邊框來使三角形更尖銳、扁平:

css程式碼如下：

article::after {
    其他程式碼省略...
    border-width: 15px 20px;/*使三角形更尖銳*/
    border-color: transparent #fff transparent transparent;/*白色三角形*/
}

把三角形放在右邊：

css程式碼如下：

article::after {
    其他程式碼省略...
    right: -40px;
    top: 35px;
    border-color: transparent transparent transparent #fff ;/*白色三角形*/
}

可以做成缺口效果：

css程式碼如下：

article::after {
    其他程式碼省略...
    top: 35px;
    left: 0;
    border-width: 15px;
    border-color: transparent transparent transparent #d4676a;/*三角形顏色設為背景顏色*/
}

用作頁面中的元素點綴：

css程式碼如下：

article::after {
    其他程式碼省略...
    top: 35px;
    right: 20px;
    border-width: 10px;
    border-color: transparent transparent transparent #d4676a;/*三角形顏色設為背景顏色*/
}

並排三角形效果：

css程式碼如下：

article::before {
    其餘程式碼相同...
    right: 30px;            
    border-width: 10px;         
    border-color: transparent transparent transparent #d4676a ;
}
article::after {
    其他程式碼省略...   
    right: 20px;
    border-width: 10px;
    border-color: transparent transparent transparent #d4676a;/*三角形顏色設為背景顏色*/
}

圖示效果：

css程式碼如下：

article::before {
    其他程式碼相同...
    right: 30px;            
    border-width: 10px;         
    border-color: transparent transparent transparent #d4676a ;/*三角形顏色設為背景顏色*/
}
article::after {
    其他程式碼省略...   
    right: 25px;
    border-width: 10px;
    border-color: transparent transparent transparent #fff;/*三角形顏色設定為白色*/
}