html - prevent css border-image attribute from stretching -
i trying add bottom border image (red curved triangle) each item of navigation bar. far used css border-image property. managed add item. problem is stretching. there way prevent them stretching while having them centered?
/** * layout */ .nav__list { margin: 0; padding: 0; } .nav__list { padding: .75em 1.5em; transition: .25s ease-in-out; } .nav__list__item { border-style: solid; border-width: 0 0 1px; } .nav__list__item, .nav__list__item { display: block; } /** * desktop-view */ @media screen , (min-width: 1024px) { .nav__list > .nav__list__item { border-width: 0 1px 0 0; } .nav__list > .nav__list__item, .nav__list > .nav__list__item { display: inline-block; } } /** * presentation */ .nav { background-color: #f5f5f5; } .nav .nav__list__item { border-color: #e5e5e5; } .nav { 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 here</a></li><!-- --><li class="nav__list__item"><a href="">this mid</a></li><!-- --><li class="nav__list__item"><a href="">3</a></li> </ul> </nav>
i use image in pseudo element can sized easily. i've set 30x15 pixels in css.
/** * layout */ .nav__list { margin: 0; padding: 0; } .nav__list { padding: .75em 1.5em; transition: .25s ease-in-out; } .nav__list__item { border-style: solid; border-width: 0 0 1px; } .nav__list__item, .nav__list__item { display: block; } /** * desktop-view */ @media screen , (min-width: 1024px) { .nav__list>.nav__list__item { border-width: 0 1px 0 0; } .nav__list>.nav__list__item, .nav__list>.nav__list__item { display: inline-block; } } /** * presentation */ .nav { background-color: #f5f5f5; } .nav .nav__list__item { border-color: #e5e5e5; } .nav { 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 here</a></li> <!-- --> <li class="nav__list__item"><a href="">this mid</a></li> <!-- --> <li class="nav__list__item"><a href="">3</a></li> </ul> </nav>
Comments
Post a Comment