Many times we come across cases where we want to have triangles, arrows or simple shapes on a site. Usually we use images to add arrows or triangles. However, this can be easily achieved by just using CSS and no need of images at all. In this post we will see how to easily we can create triangles and a few other designs using CSS.
The borders in a browser are drawn at angles, so we can use this technique to create triangle. To create a triangle we will set the border-width value for the side in which we need the arrow. Then, we will set that side’s border color and make all other sides transparent. Also, we set the width and height of the element to 0.