まずはfirstクラス

border-topを引いただけです。
当然ですがただの棒ですね。

次にsecondクラス

border-rightをたしてみました。
勘が良い人はここで気づくかも？

borderを太くしてみました。
おや、　topとrightのborderが重なる箇所が斜めになってますね...

leftとbottomもたして正方形に。
三角形の面影が見えてきましたね。

widthとheightを0にしてborderだけで全てが構成されるようにしました。
fourthクラスにあった真ん中の空間がなくなったことで斜めの線同士がくっついて見事三角形が出現しました。

今回は下向きの三角形だけ残したかったのでright, left, bottomのborderを透明に変更しました。
当然上むきにしたければbottomだけを残して残りを透明にします。

以上がcssだけで三角形を描画する仕組みでした。
わかってしまえば単純。
原理がわかっていれば二等辺三角形にしてみたり、直角の位置を変えてみたり、夢無限大。