CSSのborder-imageアトリビュートが伸びないようにする

Question

ナビゲーションバーの各項目にボトムボーダー画像（赤い曲線三角形）を追加しようとしています。これまで私はCSSのborder-imageプロパティを使用していました。 私はそのアイテムを追加することができました。問題はそれが伸びているということです。それらを中心にしている間に伸びないようにする方法はありますか？私が容易な大きさにすることができる擬似要素に画像を使用する

/** 
 
* 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

。私はこれをCSSの30x15ピクセルに設定しました。境界線を使用して

/** 
 
* 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>

Answer 2

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>