1

I'd like to get the arrow on this responsive/fluid button to expand to the height of the button itself whenever the text wraps and increases the button's height.

http://jsfiddle.net/7uajH/2/

.navigation li {
display:inline-block;
vertical-align:top;
width:50%;
margin-right:1.25%;}

.navigation li:after {
position: absolute;
content:"";
width: 0;
height: 0;
border-top: 13px solid transparent;
border-left: 15px solid #DAB347;
border-bottom: 13px solid transparent;
right: -14px;
top: 0px;}

Wondering if maybe the best way to do this is to use an image, but maybe there's a way to achieve this with CSS?

Also, I've searched around without any luck - I guess there would be no way to apply a gradient to the arrow itself?

bunnycode
  • 275
  • 2
  • 14

1 Answers1

0

You cannot RELIABLY apply gradients to "border hacks" because they're not actual HTML elements.

They are supported in some browsers, see: CSS3 Gradient Borders.

Community
  • 1
  • 1
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176