How to Design CSS Triangle

By | August 27, 2015


Using CSS3 you can design triangles that can be used in Menus, Chat Boxes etc.

Today I am gonna tell you How to Design CSS Triangle .


You can make them with a single div. It’s nice to have classes for each direction possibility.


The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle.




3 thoughts on “How to Design CSS Triangle

  1. Pingback: How To Display Browser Notifications from Web Application - ChainWebber

Comments are closed.