prevent css border-image attribute from stretching

Question

I am trying to add a bottom border image (red curved triangle) to each item of navigation bar. So far I used css border-image property. I managed to add the item. The problem is that it is stretching. Is there a way to prevent them from stretching while having them centered?

/**
 * Layout
 */
.nav__list {
    margin: 0;
    padding: 0;
}
.nav__list a {
    padding: .75em 1.5em;
    transition: all .25s ease-in-out;
}

.nav__list__item {
    border-style: solid;
    border-width: 0 0 1px;
}
.nav__list__item,
.nav__list__item a {
    display: block;
}

/**
 * Desktop-view
 */

@media screen and (min-width: 1024px) {
    .nav__list > .nav__list__item {
        border-width: 0 1px 0 0;
    }
    .nav__list > .nav__list__item,
    .nav__list > .nav__list__item a {
        display: inline-block;
    }
}

/**
 * Presentation
 */
.nav {
    background-color: #f5f5f5;
}
.nav .nav__list__item {
    border-color: #e5e5e5;
}
.nav a {
    color: #555;
    text-decoration: none;
}
.nav a:hover, .nav a:active, .nav a:focus {
    border-bottom: solid #000;
    border-image: url('https://www.dropbox.com/s/qa8qzjqqo8oa926/curved-triangle.png?raw=1') 0 0 100 0;
    border-image-width: 15px;
    border-image-outset: 5;
}

<nav class="nav nav--red">
    <ul class="nav__list">
        <li class="nav__list__item"><a href="">Some long nav title is here</a></li><!--
        --><li class="nav__list__item"><a href="">This is mid</a></li><!--
        --><li class="nav__list__item"><a href="">3</a></li>
       
    </ul>
</nav>

Answer 1

favorite
I am trying to add a bottom border image (red curved triangle) to each item of navigation bar. So far I used css border-image property. I managed to add the item. The problem is that it is stretching. Is there a way to prevent them from stretching while having them centered?

/**
 * Layout
 */
.nav__list {
    margin: 0;
    padding: 0;
}
.nav__list a {
    padding: .75em 1.5em;
    transition: all .25s ease-in-out;
}

.nav__list__item {
    border-style: solid;
    border-width: 0 0 1px;
}
.nav__list__item,
.nav__list__item a {
    display: block;
}

/**
 * Desktop-view
 */

@media screen and (min-width: 1024px) {
    .nav__list > .nav__list__item {
        border-width: 0 1px 0 0;
    }
    .nav__list > .nav__list__item,
    .nav__list > .nav__list__item a {
        display: inline-block;
    }
}

/**
 * Presentation
 */
.nav {
    background-color: #f5f5f5;
}
.nav .nav__list__item {
    border-color: #e5e5e5;
}
.nav a {
    color: #555;
    text-decoration: none;
    width:100%;
    position:relative;
}
.nav li:hover a:after{
    width:10%;
    margin:0 auto;
    position:absolute;
    content:"";
    border-bottom: solid #000;
    border-image: url('https://www.dropbox.com/s/qa8qzjqqo8oa926/curved-triangle.png?raw=1') 0 0 100 0;
    border-image-width: 15;
    border-image-outset: 10;
    bottom:0px;
    left:50%;
}

<nav class="nav nav--red">
    <ul class="nav__list">
        <li class="nav__list__item"><a href="">Some long nav title is here</a></li><!--
        --><li class="nav__list__item"><a href="">This is mid</a></li><!--
        --><li class="nav__list__item"><a href="">3</a></li>
       
    </ul>
</nav>

Answer 2

I would use the image in a pseudo element which can be sized easily. I've set it to 30x15 pixels now in CSS.

/**
 * Layout
 */

.nav__list {
  margin: 0;
  padding: 0;
}

.nav__list a {
  padding: .75em 1.5em;
  transition: all .25s ease-in-out;
}

.nav__list__item {
  border-style: solid;
  border-width: 0 0 1px;
}

.nav__list__item,
.nav__list__item a {
  display: block;
}


/**
 * Desktop-view
 */

@media screen and (min-width: 1024px) {
  .nav__list>.nav__list__item {
    border-width: 0 1px 0 0;
  }
  .nav__list>.nav__list__item,
  .nav__list>.nav__list__item a {
    display: inline-block;
  }
}


/**
 * Presentation
 */

.nav {
  background-color: #f5f5f5;
}

.nav .nav__list__item {
  border-color: #e5e5e5;
}

.nav a {
  color: #555;
  text-decoration: none;
}

.nav li {
  position: relative;
}

.nav li:hover:after, .nav li:focus:after, .nav li:active:after {
    content: "";
    width: 30px;
    height: 15px;
    background-size: 30px 15px;
    background-image: url('https://www.dropbox.com/s/qa8qzjqqo8oa926/curved-triangle.png?raw=1');
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
}

<nav class="nav nav--red">
  <ul class="nav__list">
    <li class="nav__list__item"><a href="">Some long nav title is here</a></li>
    <!--
        -->
    <li class="nav__list__item"><a href="">This is mid</a></li>
    <!--
        -->
    <li class="nav__list__item"><a href="">3</a></li>

  </ul>
</nav>