Border-bottom and border-image issues

Question

I'm having some issues with border-bottom and border-image.As I understand it I can set an image for my border , in this case I want the image to be :

However I do not get the image and it just stays a normal 3px border with the color I've specified.And it seems that the image is not taken into consideration.

Can anyone point me to the right direction(Check bootply):

http://www.bootply.com/G5LTvI8YR9

Answer 1

You can do it through css only without using any image

Demo

ul.nav a:hover {
    position: relative;
    border-bottom: 4px solid #f39385;
}

ul.nav a:hover:after, ul.nav a:hover:before {
    bottom: 0px;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

ul.nav a:hover:after {
    border-color: rgba(243, 147, 133, 0);
    border-bottom-color: #f39385;
    border-width: 3px;
    margin-left: -3px;
}

ul.nav a:hover:before {
    border-bottom-color: #f39385;
    border-width: -6px;
    margin-left: -6px;
    border-color: rgba(243, 147, 133, 0);
}

Answer 2

In your case, using a background image on hover state is much simpler than using an image for the border.

I made up this example based on you bootply that should show what you are looking for (The background image is the one you posted, you might need to tweak it and remove unused white parts on the left and right of it so that the triangle is centered) :

DEMO

CSS :

a:hover {
    color: #f39385!important;
    background: url(http://i.stack.imgur.com/fIzS3.png) right bottom no-repeat;}
a {
    text-transform: uppercase;
    color: #b9b9b9;
    font-size: 11px;
    padding-bottom: 30px;
    width:112px;
    display:inline-block;
    text-align:center;
}

Answer 3

Here's a FIDDLE if you are interested in CSS solution.

<span class="border"></span>

.border {
  position: relative;
  display: block;
  width: 70px;
  background: #f0745f;
  border: 4px solid #f0745f;
}
.border:before,
.border:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.border:before {
  border-color: transparent;
  border-bottom-color: #f0745f;
  border-width: 10px;
  margin-left: -10px;
}
.border:after {
  border-color: transparent;
  border-bottom-color: #f0745f;
  border-width: 4px;
  margin-left: -4px;
}