css三角形图标实现

1.css

.parent{

   position:relative;

   width:100px;

   height:100px;

}

.parent span {

    display:block;

    width:0;

    height:0;

     border-width:10px;

      border-style:solid;

     border-color:transparent transparent  #f00 transparent; //方向可自行调整

      position:absolute;

      top:-20px;

      left:20px;

}

2. html

3.效果

4.兼容性

主要是对transparent兼容性问题