CSS3三角偽類是CSS語言中非常實用的一種技巧，可以利用偽類的特性簡單快捷地實現帶有三角形樣式的元素，從而讓網頁達到更好的視覺效果。

//基本語法
div{
border: 10px solid transparent;
border-right-color: red;
border-left-width:0;
border-bottom-width:0;
}
// 三角形指向方向
.right .triangle-left{
border-bottom: 20px solid transparent;
border-right: 20px solid #0089ff;
border-top: 20px solid transparent;
}
.left .triangle-right{
border-bottom: 20px solid transparent;
border-left: 20px solid #0089ff;
border-top: 20px solid transparent;
}
.top .triangle-bottom{
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #0089ff;
}
.bottom .triangle-top{
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #0089ff;
}
// 不同顏色的三角形
.triangle-blue{
width: 0;
height: 0;
border-width: 20px 20px 0;
border-style: solid;
border-color: #0089ff transparent transparent;
}
.triangle-green{
width: 0;
height: 0;
border-width: 20px 0 0 20px;
border-style: solid;
border-color: #58d68d transparent transparent transparent;
}

以上是CSS3三角偽類的基本語法和不同方向、不同顏色的三角形實現方法，我們可以根據自己的需求使用相應的代碼來實現不同的效果，而且代碼非常簡單易于理解和掌握。