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

<div class="parent"><span></span></div>

3.效果


4.兼容性

主要是对transparent兼容性问题

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容