使用伪类元素画图标

.class:after{
             
          content: '';
          border-top: 8px solid rgb(233, 221, 221);
          border-left: 18px solid transparent;
          border-right: 18px solid transparent;
             
   
}
        

主要就是设置border的上和左右值,设置为transparent则是让其透明,则画出一个相应图标

 

 .header-bottom-left{
            text-align: center;
            position: relative;
            &:after{
                position: absolute;
                content: '';
                border-top: 8px solid rgb(233, 221, 221);
                border-left: 18px solid transparent;
                border-right: 18px solid transparent;
                top: 39px;
                left: 70px;
            }
    
        }

 

posted @ 2019-07-29 11:45  陈小作  阅读(565)  评论(0编辑  收藏  举报