手順1：四角形を作る
.triangle{
content: ' ';
width:10px;
height:10px;
border: 3px solid black
}
手順2：三角形の色を決める
// 今回は左辺を黄色にする
border-left-color: yellow;
手順3：辺（border）を厚くする
//変更点
border: 20px solid black;
手順4：widthとheightと小さくする
//変更点
width: 0px;
height:0px;
手順5：borderを透明にする
完成！
//変更点
border: 20px solid transparent;
最終コード
.triangle{
content: ' ';
width: 0px;
height: 0px;
border: 20px solid transparent;
border-left-color: yellow;
}