How does "CSS arrow" work? [duplicate]

Question

I have seen several examples of "CSS arrows" - basically, an arrow/triangle, done in pure CSS. Examples here:

• https://css-tricks.com/snippets/css/css-triangle/
• http://cssarrowplease.com/
• http://apps.eky.hk/css-triangle-generator/

...and so on.

However, no matter how much I look into them, I have no idea how does it actually work and why is an arrow generated.

Take this small example, adapted from the first link:

.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	
	border-bottom: 50px solid black;
}

<div class="arrow-up"></div>

Why does transparent left and right border produce arrow up? What is going on?

Answer 1

How do you draw a 50px border around a 0x0 square?

By making a 100x100 square.

#########
#########
#########
#########
#########

But, how do you control all four edges independently?

By cutting the square into 4 triangles. Each triangle is one complete segment of border, but because the border is 50px thick, it is actually composed of four different wedges of solid border:

  #########
#   #####   #
###   #   ###
####     ####
###   #   ###
#   #####   #
  #########

Now, make the top, left and right triangles transparent and you're left with just the bottom border, which forms and upwards-pointing triangle.

      #    
    #####   
  #########

You're left with a triangle pointing upwards, in the color of the bottom border.

Here's a demonstration using a progressively larger and larger border width:

div {
  margin: 10px;
}

#one {
  width: 90px;
  height: 90px;
    
  border-top: 5px solid blue;
  border-left: 5px solid red;
  border-right: 5px solid green;
  border-bottom: 5px solid black;
}

#two {
  width: 50px;
  height: 50px;
    
  border-top: 25px solid blue;
  border-left: 25px solid red;
  border-right: 25px solid green;
  border-bottom: 25px solid black;
}


#three {
  width: 0;
  height: 0;
    
  border-top: 50px solid blue;
  border-left: 50px solid red;
  border-right: 50px solid green;
  border-bottom: 50px solid black;
}


#four {
  width: 0;
  height: 0;
    
  border-top: 50px solid transparent;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid black;
}

<p>First, lets make a box, 100x100px. We'll use a 5px border, and a 90x90px content area.</p>
  
<div id="one"></div>

<p>Next, lets make the box smaller, but make the borders bigger. You should start to see how the four borders are controlled independly. We'll use a 50x50px box and a 25px border.</p>
  
<div id="two"></div>

<p>Now we'll shrink the box down to 0x0, with a 50px border on all edges. Now, there is no box, only border. It's now quite obvious that, as the border grows and the content shrinks, the border is cut along the corners at a 45 degree angle.</p>

<div id="three"></div>

<p>Finally, if we make the top, left and right borders transparent, ony the lower triangle making up the bottom border is left.</p>

<div id="four"></div>