css实现 三角

仿照天猫左侧导航选中时有个三角。
效果如图所示：

实现步骤：

• 创建html

<ul>

    <li class="item">
        一楼女装
        <s class="triangle">
          </s>
    </li>

    <li class="item">
       二楼男装
        <s class="triangle">
        </s>
    </li>

    <li class="item">
        三楼婴儿用品
        <s class="triangle">
        </s>
    </li>
</ul>

• 写css 主要运用border属性

ul li{
    font-family: "microsoft yahei";
    list-style-type: none;
    margin-bottom: 10px;
    padding-left: 5px;
    height: 30px;
    line-height: 30px;
    color:white ;
    background-color: #4a4a4a;
    width: 150px;
    overflow: hidden;
    position: relative;
}
.triangle{
    display: none;
    position: absolute;
    right:0px;
    top: 8px;
    border-style: solid;
    border-width: 7px 7px 7px 0;
    border-color: transparent #f3f3f3;
}
li:hover{
    background-color: #a90000;
    color: white;
    text-indent: 20px;

}
li:hover .triangle{
    display: block;
}