CSS三角是樣式設計中很常見的一種元素，可以用來指示某些內容或者進行裝飾，但是在一些老舊的瀏覽器中（如IE8）并不支持使用純 CSS 來實現。下面我們介紹如何在 CSS 中使用預處理器來實現這一需求。

.triangle {
position: relative;
width: 0;
height: 0;
}
.triangle:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-top: 10px solid #000;
border-right: 10px solid transparent;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* 適用于IE10、IE11，并模擬IE8瀏覽器 */
.triangle {
display: inline-block;
*zoom: 1; /*IE8專屬*/
}
.triangle:before {
display: inline-block;
*zoom: 1;
content: "";
position: absolute;
top: 0;
left: 0;
border-top: 10px solid #000;
border-right: 10px solid transparent;
}
.triangle {
display: inline-block;
*display: inline; /*IE8專屬*/
*zoom: 1;
}
}

在上面的代碼中，我們首先定義了一個 CSS 類 .triangle 用于設置三角形的樣式，然后使用偽元素 :before 設置一個傾斜的邊框來形成三角形，設置頂端顏色和邊框寬度就可以實現一個等腰三角。

接下來，我們使用 @media 語句來判斷是否為 IE8 瀏覽器，如果是，則新增了三個 CSS 屬性用于適配 IE8 的瀏覽器：

• display: inline-block; *zoom: 1;
• *display: inline; *zoom: 1;

其中 *zoom: 1; 是 IE8 專用的屬性，主要是為了解決 IE8 中的布局問題。

通過以上代碼，在 IE8 中也可以實現一個漂亮的三角形啦！