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像素。

＆＃13;

/**
 * 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%;
}

＆＃13;

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

＆＃13;

Answer 2

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

if (Hash::check("ValueForEnteredpassword", "HashOldPassword")) { 
      //your code  
    }   else { 
    //Your error message 
    }

防止css border-image属性拉伸

2 个答案: