CSS是前端開發中不可或缺的一部分，通過CSS我們可以很方便的實現各種各樣的樣式效果。其中，長方形底部為三角形的效果經常被用在一些導航條、提示框等地方，下面我們就來一步步實現這個效果。

. triangle {
width: 100px; /* 寬度 */
height: 0; /* 高度為0 */
border-top: 50px solid #007bff; /* 上邊框寬度為50，顏色為藍色 */
border-left: 50px solid transparent; /* 左邊框寬度為50，顏色為透明 */
border-right: 50px solid transparent; /* 右邊框寬度為50，顏色為透明 */
}

上面的代碼中，我們首先設置一個寬度，然后將高度設置為0，接著利用border屬性來實現三角形的底部在長方形的下方。其中，上邊框的寬度為50像素，顏色為藍色，左邊框和右邊框的寬度也為50像素，顏色則設定為透明（transparent）。

通過這樣的方式，我們就成功地實現了長方形底部為三角形的效果。當然，如果需要更改三角形的顏色、寬度等屬性，只需要調整border的對應屬性即可。