How to Design CSS Triangle

By | August 27, 2015

728x90-popads_1

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 .

HTML

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

CSS

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.

Examples:-

css-triangle

728x90-popads_1

3 thoughts on “How to Design CSS Triangle

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

Comments are closed.