Question

I want to use css triangles (e.g. http://css-tricks.com/snippets/css/css-triangle/ or http://davidwalsh.name/css-triangles) as navigation links –

but they get ‘chopped’ and are not triangles as in http://jsfiddle.net/DBK35/

    #arrow-left {
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent; 
         border-left:0px  solid transparent;        
    border-right:8px solid blue; 
}     
#arrow-right {
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid blue;
}
.aaa {
  display: block;
     width: 100px;      
    height: 100px; 
} 

They are triangles with div’s, i.e. http://jsfiddle.net/43RCf/

#arrow-left {
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent; 
         border-left:0px  solid transparent;        
    border-right:8px solid blue; 
}     
#arrow-right {
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid blue;
}
.aaa {
  display: block;
     width: 100px;      
    height: 100px; 
}

but I don’t want the line breaks with those div’s, I want a nav bar that is:
“left-arrow “images” right-arrow”

Answer 1

Add display: inline-block to #arrow-left and #arrow-right.

http://jsfiddle.net/thirtydot/43RCf/2/