CSS實體三角是在網頁設計中常用的一種簡單設計元素，可以用來增加網頁結構的層次感和視覺效果。在CSS中，實體三角是通過:before和:after偽元素來實現的。

/* 創建三角形 */
.triangle {
position: relative;
width: 0;
height: 0;
border-top: 50px solid transparent; /* 50px為三角形的高度 */
border-bottom: 50px solid transparent;
border-left: 50px solid #333; /* #333為三角形的顏色 */
}
/* 創建帶陰影的三角形 */
.shadow-triangle {
position: relative;
width: 0;
height: 0;
border-top: 50px solid rgba(0,0,0,0.5);
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* 陰影效果 */
}
/* 創建箭頭 */
.arrow {
position: relative;
width: 50px; /* 箭頭的寬度 */
height: 50px; /* 箭頭的高度 */
}
.arrow:before {
content: "";
position: absolute;
top: 50%; /* 箭頭頂部距離 */
left: 0;
width: 0;
height: 0;
border-top: 25px solid transparent; /* 三角形的高度 */
border-bottom: 25px solid transparent;
border-right: 25px solid #333; /* 三角形的顏色 */
transform: translateY(-50%); /* 使三角形垂直居中 */
}
/* 創建菱形 */
.diamond {
width: 100px; /* 菱形的寬度 */
height: 100px; /* 菱形的高度 */
transform: rotate(45deg); /* 旋轉45度，變成菱形 */
background-color: #333; /* 菱形的顏色 */
}

使用CSS實體三角可以輕松實現各種各樣的形狀，并且可以通過其他CSS屬性（如顏色、陰影、動畫等）來增加視覺效果，使網頁看起來更加豐富多彩。同時，實體三角的優勢在于無需使用圖片，減少了網頁的加載時間和服務器的負擔，更加符合網頁優化的要求。