How is it that CSS borders create a triangle?

Question

I'm curious to know how the popular CSS triangles are made using just borders. Here's an example of the code:

#CLASS or ID name  #CLASS or ID name:after {
  border-color: transparent transparent #F3F3F3;
  border-style: solid; 
  border-width: 6px;  
  bottom: 0;  
  content: ""; 
  height: 0;
  left: 50%; 
  margin-bottom: -1px;
  margin-left: -6px; 
  margin-top: 0;
  position: absolute;
  width: 0;
}

Again, how is it exactly that this creates an up arrow? Additionally, I'm confused as to what content: "" does.

Please learn to properly format questions. Also, if you don't bother to use proper English, why would anyone bother to answer your question? — sachleen, Oct 11 '12 at 04:38
You don't use HTML tags... Please see this reference: [Markdown Editing Help](http://stackoverflow.com/editing-help) — sachleen, Oct 11 '12 at 04:58

jamesplease · Accepted Answer · 2013-10-01T14:27:56.323

user1637741, you ask a very good question.

Firstly, let me begin by explaining the purpose of content:"";. You see, what we're using here is a called a pseudo element. These are intended to add content to your page, like words or images. The triangle (or arrow) situation is a hack of sorts, in that we don't actually want to add any new content to our page; instead, we simply want to draw a border for the element (which, yes, will ultimately give us a triangle). However, the pseudoelement's content does more than specify what it contains. It also acts as the boolean to determine whether or not to display the element at all. In other words, if there's no content, the thing won't render. Luckily for us, simply passing an empty string is enough to make it display.

Okay, so now about that pesky border. How in the world does it make a triangle? In short, what we're doing is drawing a border on a single edge of the element, then positioning the element such that we only see what appears to be a triangle.

Here, let me show you. Check out this JSFiddle. This isn't anything too out of the ordinary. It's just a div that is only displaying a bottom border. But, if you stare and it and think about it, imagine hiding most of that border so that what's left is a triangle. If you removed all of it except one of the edges, we'd have a very little triangle left over. Can you see it?

IE7 doesn't support the :before and :after pseudoelements. You can't make it work with just CSS. You could see if IE7 displays the triangle unicode characters, ▲, and use those, or you could [use this solution](http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7). — jamesplease, Oct 17 '12 at 11:36

score 1 · Answer 2 · answered Oct 11 '12 at 05:17

First, let's re-arrange your example a bit and get rid of any css that isn't pertinent to your question:

.my-div:after {
    content: ""; 
    border-style: solid; 
    border-width: 6px;  
    border-color: transparent transparent #F3F3F3;
}

What this is doing:

content: "" inserts some content immediately following .my-div. Since in this case it's an empty string, you now basically have a text node that has no content, and thus has 0px width
next, border-style: solid; and border-width: 6px are going to enclose that empty content with a 6px wide border. Since the content has no width, you've essentially got a solid box that's whatever color your default text color is
last, border-color: transparent transparent #F3F3F3; is going to reset the border colors for each of the four sides. The first transparent sets the top border to be clear, the second one sets the left and right borders to also be clear, and #F3F3F3 sets the bottom border to be an off white color. So now you've got a box that's all borders, and the top and side borders are invisible leaving just the bottom border. But instead of that just being a 6px thick line at the bottom, because of the 45 degree angles formed by each of the sides joining (think of the miters on a picture frame), what you end up with is an arrow, in this case pointing up.

The rest of the rules in your original example were just positioning rules.

How is it that CSS borders create a triangle?

2 Answers2