CSS創建左右三角形可以通過使用偽元素（:before, :after）和邊框（border）實現。

/* 創建左三角形 */
.triangle-left:before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid black;
border-bottom: 10px solid transparent;
}
/* 創建右三角形 */
.triangle-right:before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 10px solid black;
border-bottom: 10px solid transparent;
}

在上述代碼中，我們使用偽元素 :before 和 content 屬性來創建一個空的元素。然后，我們使用 border 創建出一個三角形的邊框，通過設置寬度和高度為 0 隱藏多余的邊框。最后，使用 display: inline-block 將元素設為行內塊級元素，并通過給元素添加類名調用。

使用這種方式創建三角形語義化清晰，無需使用圖片進行繪制，可以有效地提高頁面加載速度。