CSS triangles getting cut off

Question

I'm trying to create some CSS triangles, using css and the :after pseudo class. Somehow, the up and down arrows are working properly, but the left and right arrows are being "cut off" (see fiddle: http://jsfiddle.net/K9vxN/ )

This is basically the css I'm using:

.arrow-right:after {
    content:"";
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid green;
}

Does anyone know why this is happening?

Answer 1

Make the :after pseudo element inline-block (or block). Currently it's an inline element, and it's size is based on the line height of the (empty) text it contains.

You'll have to fix some positioning then, though, but that should be trivial.

div { height:0px; }
div:after { content:""; display: block;}

.arrow-up:after {
  margin-left: 50px; /* move right, to show it */
	width: 0; 
	height: 0; 
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	
	border-bottom: 15px solid black;
}

.arrow-down:after  {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	
	border-top: 20px solid #f00;
}

.arrow-right:after {
	width: 0; 
	height: 0; 
	border-top: 60px solid transparent;
	border-bottom: 60px solid transparent;
	
	border-left: 60px solid green;
}

.arrow-left:after {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	
	border-right:10px solid blue; 
}

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

http://jsfiddle.net/K9vxN/2/

By the way, you might not need to use :after at all, but that depends on whether you want the div to have an arrow or to be an arrow. That's up to you. ;)

Answer 2

Simply add display: block to all your :after selectors. For example

.arrow-up:after {
    display: block; /* Added this */
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}

Here's a demo

Answer 3

Ensure the :after pseudo-element is specified as either block or inline-block, dependent upon your usage scenario.

div:after {
    content:"";
    display: block;
}

See http://jsfiddle.net/kFa6a/