CSS是前端開發中的一項重要技術，它可以實現各種各樣的效果。其中，用CSS做三角形框也是前端開發中經常使用的技巧。

首先我們需要明確三角形框的樣式。它就像一個普通的矩形框，但是兩個對角線是斜著的，并且帶有一個三角形頭。接下來，我們就可以開始用CSS來實現這個效果了。

.triangle-box {
width: 200px;
height: 100px;
background-color: #ccc;
position: relative;
}
.triangle-box:before {
content: '';
position: absolute;
left: 0;
top: 50px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 15px 15px 0px;
border-color: transparent #ccc transparent transparent;
}
.triangle-box:after {
content: '';
position: absolute;
right: 0;
top: 50px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 0px 15px 15px;
border-color: transparent transparent transparent #ccc;
}

上面的代碼中，我們定義了一個類名為“triangle-box”的元素，它是一個矩形框，顏色為灰色。接著，我們使用:before偽元素和:after偽元素分別在左側和右側創建了兩個等腰直角三角形，用來補充矩形框的兩個斜角。

具體來說，在:before偽元素中，我們首先設置了一個空內容“content: ''”，這一步通常是為了兼容性而設置的。接著，我們設置了這個元素的位置為絕對位置，相對于它的父元素“triangle-box”定位。然后，我們設置了這個元素的“left”和“top”屬性，讓它浮動在“triangle-box”最左側中央。然后，我們按順序設置了這個元素四個邊框的樣式：上、右、下、左。其中，上、下兩個邊框的寬度都是15px，而右側的邊框寬度為0。最后，我們設置了這個三角形的顏色，即左上角和右下角之間的區域填充為灰色，“transparent”表示透明。

同樣地，在:after偽元素中，我們把三角形放在了“triangle-box”最右側的位置，并且把左右邊框的樣式顛倒過來，使得右下角和左上角之間的區域填充為灰色。

這樣，當你使用這個樣式時，就可以在頁面上看到一個非常漂亮的三角形框了。