Create Pure CSS Triangles With This Free Web App

By Jake Rocheleau. in Web Design. Updated on December 9, 2017.

There’s a big push to make the web a more CSS-friendly place. For years, images were always the solution to browser hacks from repeating backgrounds to the sliding doors technique. But now it’s easier than ever to create patterns, icons, and special effects with CSS3.

With this triangle generator, you can design the size and shape of any triangle you want. It’ll automatically spit out a CSS class which you can apply to any element.

In the options panels, you can change the triangle’s color and direction (up/down and sideways). You can also change the triangle’s width/height and even mess with the left/right skew if you make a scalene triangle.

This is by far one of the coolest web apps I’ve ever seen. It’s hosted on Designyourcode which is a site full of great blog articles and free web dev tools.

And for all lovers of backward compatibility, you have the option to include the Microsoft.Chroma feature in CSS which adds support for IE6 users. Less than one percent of the world even uses IE6 but it’s still a nice option.

To add a pure CSS triangle to your site, just copy/paste the CSS class with the rules into your stylesheet. Then give this class to any <div> or empty block element.

For example, to make an upward-pointing triangle you’d copy the code and add an element like this:

<span class="triangle-top"></span>

That <span> could be a block-level element as well, or it could be positioned absolutely within another element.

The possibilities are endless and this tool can offer a better alternative than the CSS border hack. To get started, just visit the triangle web app and change up the values to your liking.