CSS中可以使用偽元素實現左側三角的設計效果。以下是一個使用::before偽元素實現的示例代碼：

.triangle {
position: relative;
width: 200px;
height: 200px;
background-color: #fff;
}
.triangle::before {
content: "";
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
border-top: 10px solid transparent;
border-right: 20px solid #333;
border-bottom: 10px solid transparent;
}

在示例代碼中，通過給三角形元素triangle添加一個::before偽元素來實現左側三角的效果。整個元素的高度和寬度可以自行設定。

接下來，對::before偽元素來一一解析：

content: "";

表示引入一個空元素。

position: absolute;

表示絕對定位。

left: -20px;

表示將左側三角移動到triangle元素的左側外面20個像素的地方。

top: 50%;

表示將左側三角垂直居中。

transform: translateY(-50%);

表示將左側三角沿著Y軸上移50%的高度。

border-top: 10px solid transparent;
border-right: 20px solid #333;
border-bottom: 10px solid transparent;

表示設置三角的邊框顏色及大小。其中，上邊框及底邊框事先設置成透明以使三角形成等腰三角形。

除了使用::before偽元素實現左側三角以外，還可以使用::after偽元素來實現。不同的方案適用于不同的設計情況。因此，在進行具體設計時，需要根據實際情況調整。