css 显示三角形

css显示三角形

#triangle-up是div

#triangle-up {

    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;

}

如果#triangle-up是span标签，，在显示向左向右的箭头时，需要加上，font-size:0;(???)

#top-right{
width: 0;
    height: 0;
  border-left: 50px solid transparent;
   border-top: 50px solid blue;
}

CSS实际使用时可以借用before，after插入。借助定位固定位置。

.navbar-active:after{
    position: absolute;
    bottom: 0;
    left: 42px;
    content: '';
    width: 0;
    height:0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #fff;
}