Skip to main content

CSS triangles

Published on 12th December 2012

When I designed my blog I wanted to find a way to create a CSS only tag shape to display my article tags.

CSS triangles came to my rescue. You can create CSS triangles with very little code and they are cross-browser compatible! The browser draws borders at angles (shown below) and this is how we create our triangles. One side of the border has a colour and the rest are transparent. To increase the size of the triangle, you increase the size of the border.

 
.browser-borders {  
  border-color: #39beef #ea5375 #187da4 #333;
  border-style: solid;
  border-width: 3rem;
  width: 0;
  height: 0;
}

You can create triangles that point up, right, down and left.

view demo