In my opinion, utilizing CSS may not be the most suitable option for this task. Although it is feasible to generate various shapes using CSS, there are constraints. Drawing shapes with CSS can sometimes feel like a workaround, especially when attempting to create something as simple as a triangle.
Instead of relying on CSS, I would recommend utilizing SVG as the ideal tool for this particular job.
SVG is a format for vector graphics that can be integrated into a website and can be manipulated or modified directly through Javascript within the site itself. Modifying the color and shape of a basic polygon is extremely straightforward with SVG.
Another benefit of using SVG is its scalability, allowing you to display it at any size without distortion.
The drawback of SVG is its lack of support in older versions of Internet Explorer (specifically IE8 and earlier). However, these browsers do support an alternative known as VML. Additionally, there are numerous excellent Javascript libraries available that are compatible with either format, ensuring complete cross-browser compatibility. One highly recommended library is Raphael.js.
By opting for a small and uncomplicated snippet of Javascript code over a complex CSS solution, you can streamline your process significantly. It's a clear win-win situation in my book.