导航栏的小三角

京东导航栏的小三角

1. 真正的矩形
   
2. 隐藏其他三边，实现三角

<style>
    .triangle{
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px;
    border-color:lightblue;
    border-right-color: transparent;
    border-left-color: transparent;
    border-top: none;
    }
</style>

transparent：设置为透明

3.梯形

设定宽高值即可