CSS對角顏色不同（Diagonal Colors）是一種讓網頁上的兩個三角形以不同的顏色呈現的方法。這個效果非常酷，也非常容易實現！

首先我們要創建一個元素，代碼如下：

<div class="container"></div>

接下來，我們需要通過CSS來定義這個容器的寬高和背景色，以及用偽元素:before和:after繪制兩個三角形，并對它們進行顏色設置。

.container {
position: relative;
width: 200px;
height: 200px;
background-color: #f1f1f1;
}
.container:before,
.container:after {
content: "";
position: absolute;
top: 0;
width: 0;
height: 0;
}
.container:before {
left: 0;
border-left: 100px solid transparent;
border-right: 100px solid #f00;
border-bottom: 100px solid transparent;
}
.container:after {
right: 0;
border-left: 100px solid #f00;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
}

我們使用偽元素:before和:after繪制兩個三角形，其中一個是左三角形，另一個是右三角形。這里的關鍵點是設置左三角形的border-right為紅色，右三角形的border-left同樣設置紅色。

現在，您可以在頁面上看到兩個不同顏色的三角形啦！

這個技巧對于設計一個鮮艷、有趣的網站非常有幫助。您可以嘗試在容器樣式中改變背景顏色，以及改變三角形的顏色方案以找到最佳效果！