CSS 在頁面設計中起著重要的作用。其中一個常見的應用就是在矩形框的左下角添加三角形。

.box {
width: 100px;
height: 100px;
position: relative;
}
.box:before {
content: "";
position: absolute;
bottom: -20px;
left: 0;
border: 10px solid transparent;
border-top-color: #333;
}

首先，我們需要先創建一個矩形框。在 CSS 中，我們可以使用 .box 類定義它的屬性。在這個例子中，我們定義了寬度和高度為 100px。

接下來，我們需要將這個矩形框的位置設置為相對定位（relative）。這是因為后面我們需要使用 absolute 定位三角形的位置。

在 .box 類的偽元素 before 中，我們通過 content 屬性插入了一個空的內容。在插入偽元素時，它們在文檔流中表現為元素的一部分，與其它 HTML 元素一樣可以類型選擇器進行樣式修改。接下來，我們通過 position 絕對定位將三角形定位于矩形框的左下角。

最后，我們使用 border 屬性定義三角形的樣式。每一個 border 的值都被設置成 transparent，而 border-top-color 屬性則被設置成黑色 (#333)。這樣就實現了左下角三角形的效果。

總的來說，使用 CSS 創建一個矩形框的左下角三角形并不是很難，我們只需要理解好每一個屬性的作用就能輕松實現。