CSS Triangle Reference Guide

A large part of what I do here at Nuanced Media is figuring out the tricky code to make beautiful sites so that our frontend developers don’t have to bang their heads against a wall for hours on end. To that end, it helps to have quite a few sites in my pocket that I can reference as needed. One of my most-viewed sites for this purpose is The Shapes of CSS over on CSS-Tricks.

While some of the shapes and techniques are extremely useful, most are for novelty (how often does one need a CSS-based Yin Yang, after all?). One thing keeps cropping up in designs, however – the triangle. Specifically, a triangle appended to, or sitting beside, some other element on the page (a little like the talk bubble on the Shapes of CSS page).

After flailing around in the dark and making these from scratch a few times over, I decided I needed to create a quick reference sheet for myself, and figured others might benefit from this as well.

Let’s think about how many possible triangle styles we can create with these methods. (Warning: math ahead!) There are four borders (top, right, bottom, left), and we can either use them or not. Let’s say that each border is either “on” (represented by “1”) or “off” (represented by “0”). With our friend binary numbers, this means that there are 2*2*2*2=16 possibilities. Some of these are invalid, however.

If we give an element with 0 height and 0 widths a border-top and a border-bottom, for instance, nothing will show. We have to have at least two touching edges show up. Similarly, an element that only has one border will not show anything. For example, the combinations “top/bottom,” “right/left,” “top,” “bottom,” and so on will yield nothing. Also, of course, if no borders are showing then we will not make any shape! This leaves us with 9 possibilities – 8 are shown here, since having all four borders is just silly.

Now if we want to use this to make a single triangle, we give every border except the desired one a color of “transparent.” Here are some examples for your entertainment, and for you to build off of.

.tall-triangle {
	border-right: solid 30px transparent;
	border-bottom: solid 60px rgb(200,100,100);
	border-left: solid 30px transparent;
}

.bridge-left {
	border-bottom: solid 40px transparent;
	border-left: solid 40px #555;
}
.bridge-right {
	border-right: solid 40px #555;
	border-bottom: solid 40px transparent;
}

Talk Bubbles

.tutorial-talk-bubble-left {
	position: relative;
	width: 160px;
	height: 60px;
	padding: 20px;
	border-radius: 10px;
	background-color: rgb(200, 200, 230);
}
.tutorial-talk-bubble-left:after {
	content: " ";
	position: absolute;
	width: 0;
	height: 0;
	right: 100%;
	top: 20px;
	border-top: solid 15px transparent;
	border-right: solid 20px rgb(200, 200, 230);
	border-bottom: solid 15px transparent;
}

.tutorial-talk-bubble-bottom-right {
	position: relative;
	width: 160px;
	height: 50px;
	padding: 20px;
	border-radius: 10px 10px 0 10px;
	background-color: rgb(230, 200, 200);

}
.tutorial-talk-bubble-bottom-right:after {
	content: " ";
	position: absolute;
	width: 0;
	height: 0;
	left: 100%;
	bottom: 0;
	border-right: solid 20px transparent;
	border-bottom: solid 20px rgb(230, 200, 200);
}