<li>末尾的css三角形

Question

我希望实现这样的目标

我怎么把这个三角形css

    .triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 21px 42px 21px 0;
border-color: transparent #eeeeee transparent transparent;
line-height: 0px;
_border-color: #000000 #eeeeee #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
    }

在我的标签的末尾做一个三角形？演示http://jsfiddle.net/p69qfqsx/

Answer 1

列表的新CSS:

ul{
    width: 200px;
    border: 1px solid #ccc;
}

li a{
    background-color: #fff;
    padding: 5px 10px;
    display: block;
    position: relative;
    color: #666;
    text-decoration: none;
}

li a:hover, li.active a{
    background-color: #eee;
}

li a:hover:after, li.active a:after{
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #fff;
  /* background-color: #ddd; */
  content: '';
  position: absolute;
  right: -2px;
  top: 0;
}

https://jsfiddle.net/p69qfqsx/2/

仅针对chrome测试希望它有所帮助.