CSS中經常會使用斜三角圖案來裝飾頁面。斜三角是指具有三個直角的三角形，它可以用來實現背景圖案、圖標等。本文將介紹如何通過CSS來創建斜三角效果。

// 創建一個45度斜角的三角形 
.triangle {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 20px solid #ccc;
border-bottom: 20px solid transparent;
}

上面的代碼通過設置border屬性來創建一個45度斜角的三角形。其中，border-top和border-bottom設置了透明色，使得三角形只在左邊有實體部分，而非左上角和左下角都有實體的正方形。

// 創建一個水平居中的斜三角 
.triangle-center {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 20px solid #ccc;
border-bottom: 20px solid transparent;
margin: 0 auto;
}

上面的代碼在上面的基礎上增加了margin：0 auto屬性，使得斜三角可以居中顯示。

// 創建倒三角 
.triangle-reverse {
width: 0;
height: 0;
border-top: 20px solid #ccc;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
}

上面的代碼創建了一個倒三角，只需要將上下邊框和左邊框的顏色互換即可。

// 創建右邊斜三角 
.triangle-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 20px solid #ccc;
border-right: 20px solid transparent;
}

上面的代碼創建了一個朝右的斜三角，只需要將左邊框和右邊框的位置顛倒即可。

通過以上的代碼示例可以看出，通過簡單設置border屬性就能夠實現各種不同形狀的斜三角。而且這還只是CSS3中斜三角實現方式的冰山一角，更多的實現方式和效果等CSS知識需要進一步的學習和了解。