CSS 偽類三角形尖角是在網頁設計中經常用到的一個技巧。通過偽類選擇器的方法，可以在不使用圖片的情況下實現圖片的效果。下面介紹幾種常用的 CSS 偽類三角形尖角寫法。

/* 基本三角形 */
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #f00;
}
/* 實心三角形 */
.solid:after {
content: "";
display: block;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #555;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
/* 矩形與三角形結合 */
.rect-triangle {
position: relative;
padding: 20px;
background-color: #f1f1f1;
}
.rect-triangle:before {
content: "";
position: absolute;
top: 0;
left: 50%;
border-top: 20px solid #f00;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
transform: translateX(-50%);
}

基本三角形是通過設置一個寬高都為 0 的元素，為其設置 transparent 的邊框顏色來實現的。通過修改邊框的大小和顏色，可以實現不同樣式的三角形。實心三角形的主要區別在于，將邊框顏色修改為元素的背景色，并將尖角的偽元素放置在元素的下方。矩形與三角形結合的效果，是利用偽元素：before 與元素配合，將一個矩形分為兩部分，分別實現矩形和尖角的效果。