CSS Triangles: How do they work?
And why use them in the first place? When thoughtfully utilized, shapes add meaning and interactivity to our web designs and can draw the user’s attention to important information. For example, we might use a triangle next to a menu item to signify that there are additional items nested below. Or a triangle can group an element visually with another element. You might even use them as breadcrumb navigation throughout a complex site in order to establish a visual hierarchy for the user to follow.
The Ultimate Goal: Intuitive User Experience
Ultimately, our goal as web designers is to convey information in a way that is both visually compelling and easy for the user to understand. Our main goal as web developers is to code that information in such a way that doesn’t get in the way of that compelling and easy to navigate design.
While it can be both fun and functional to create shapes with code, we should always keep in mind that the ultimate goal of our design is usability and shapes should be used to enhance the user experience.
A couple of examples
Amazon uses a triangle on their site to signify to the user that there is a drop-down list of departments for them to browse:
Vans uses triangles in two ways. First, they use a triangular arrow next to navigation items to signify that there are additional menu items which can be viewed by hovering or clicking. They also use a triangle above the sub-menu container to clarify which menu item it’s paired with. Without these triangles, the user may not know that there is more content and where that content will lead them.
Both of these are simply examples of smart user interactivity design.
So… Why bother coding triangles at all?
Why choose to code triangles rather than make an image in Photoshop? Because the amount of images on our site affects page load time and that gets in the way of the user experience. An additional benefit to creating shapes with code is that it affords us better control over work. For one, editing within the stylesheet on the fly is much easier than opening up an image editing program. It’s also much simpler to create shapes that look good in all browsers and on all devices.
The CSS Triangle Hack
One of the oldest and most tried and true tricks for creating a pure CSS triangle is the CSS Triangle Hack. I created this Code Pen as a little guide to coding CSS triangles using this technique:
There are other ways we can code triangles into the design and functionality of our websites (linear gradients, for example) but that’s a whole other blog post all-together!
