How does the CSS arrow work?

Question

I saw some examples of CSS arrows - basically an arrow / triangle made in pure CSS. Examples here:

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

... etc.

However, no matter how I look at them, I have no idea how this works and why the arrow is created.

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>

Run codeHide result

Why does the transparent left and right border create an up arrow? What's happening?

Answer 1

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

By making a square of 100 × 100.

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

But how do you control all four ribs independently?

4 . , 50 , :

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

, , , .

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

, , .

:

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 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>

Hide result