三角形はborder（枠線）を使って表現することができます。
borderの四辺に違う色を指定して確認してみましょう

【border:3px; を指定した、50pxの正方形】
width:50px;
height:50px;
border-top:3px solid #FF7FBF;
border-left:3px solid #FFFF7F;
border-right:3px solid #7F7FFF;
border-bottom:3px solid #7FFFBF;


【border:20px; を指定した、50pxの正方形】
width:50px;
height:50px;
border-top:20px solid #FF7FBF;
border-left:20px solid #FFFF7F;
border-right:20px solid #7F7FFF;
border-bottom:20px solid #7FFFBF;


中央の白い四角形（50px正方形）をなくすために
width:0px;
height:0px;
を指定してみましょう。

【border:20px; を指定した、0pxの正方形】
width:0px;
height:0px;
border-top:20px solid #FF7FBF;
border-left:20px solid #FFFF7F;
border-right:20px solid #7F7FFF;
border-bottom:20px solid #7FFFBF;


上記ピンクの三角形を表示させる場合、他の三角形をtransparent(透明化)で消します。
width:0px;
height:0px;
border-top:20px solid #FF7FBF;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-bottom:20px solid transparent;


下向き三角形の完成です。
もうお気づきでしょうが、右向き、左向き、上向き三角形も同様に作成できますね
その他、border-width の値を調整すると、三角形のサイズも変えることができます。

お役立ちサイトとして
CSS triangle generator
では、頂点やサイズ、色を指定するだけで
簡単に三角形を作成することができます。

吹き出しや、簡単なアイコンなど作成する際に
使ってみてください