День добрый!
2 варианта выше не совсем то, что требуется, насколько понял. Задача решается немного иначе, но в принципе, её можно решить границами (border).
Но это далеко не единственный способ рисовать треугольники.

Это можно сделать и трансформациями. Метод трансформаций более гибок, но и более сложен в реализации.
Например, так:
<iframe width="800" height="550" src="http://embed.plnkr.co/enJ5gJos5a2yWYKU2Nyz/" frameborder="0" allowfullscreen></iframe>