小编ost*_*red的帖子

我正在尝试为一个边框制作一个响应三角形,只有在边框上才可见hover.我尝试了下面的代码,但它不起作用,因为它使用静态border-width.当我有一个单字符串(单行)链接时,它是完美的,但是当字符串更多(超过一行)时,它就失败了.

这里的例子

代码在这里:

<ul>
  <li><a href="#">Lorem ipsum</a></li>
  <li><a href="#">Lorem ipsum</a></li>
  <li><a href="#">Lorem ipsum dolor sit amet</a></li>
</ul>  

SCSS在这里:

ul{
  width:120px;
  li{
    list-style-type: none;
    a{
      position:relative;
      display:block;
      padding:10px;
      color:#00f;
      text-decoration: none;
      &:hover{
        color:#fff;
        background:#00f;
        &:after{
          content:'';
          position: absolute;
          top: 0;
          right: -5px;
          height: 0;
          border-style: solid;
          border-width: 19px 0 19px 11px;
          border-color: #fff #fff #fff #00f;
        }
      }
    }
  }
}

最后一个链接失败.使用图像或图片不是解决问题的方法.