CSS裁切div成三角形可以為網頁增加更多的設計元素，提升網站的美觀程度。下面將演示如何利用CSS實現簡單的三角形設計。

.triangle {
width: 0; 
height: 0; 
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;  
border-left: 50px solid red; 
}

在上述代碼中，我們首先將div的高度和寬度都設置為0，然后通過border屬性來設置三角的大小和顏色。其中，border-top和border-bottom屬性值都設置為50px，并且設為透明色，表示三角形的上下兩邊是透明的。border-left屬性也設置為50px，但顏色為紅色，表示三角形的左邊是紅色。

這樣就可以創建一個等腰直角三角形，但如果需要創建其他形態的三角形，則需要改變border屬性的值，比如像下面這樣：

.triangle-right {
width: 0; 
height: 0; 
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;  
border-right: 50px solid red; 
}
.triangle-left {
width: 0; 
height: 0; 
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;  
border-left: 50px solid blue; 
}

如上述代碼所示，.triangle-right表示右側的三角形，需要將border-right屬性設置為50px，并且顏色為紅色。.triangle-left表示左側的三角形，需要將border-left屬性設置為50px，并且顏色為藍色。

總之，CSS裁切div成三角是一種簡單而常用的技術，可以讓我們在網頁設計中使用更多的圖形元素，提高網站的美觀性。