3种用CSS控制border的颜色实现向下的小箭头的方法

最新推荐文章于 2024-06-22 09:56:05 发布

志_祥

最新推荐文章于 2024-06-22 09:56:05 发布

阅读量2.7k

点赞数

分类专栏：读书笔记文章标签： css 前端

本文链接：https://blog.csdn.net/cteng/article/details/52240366

版权

读书笔记专栏收录该内容

275 篇文章 0 订阅

订阅专栏

span#test1:after{
    content: "";
    border: 4px solid transparent;
    border-top-color: #717077;
}

span#test2:after{
    content: '';
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    line-height: 0;
    border: 4px solid #848484;
    border-color: #848484 transparent transparent transparent;
    border-bottom-width: 0;
    position: relative;
    left: 1px;
}

</pre><pre code_snippet_id="1837680" snippet_file_name="blog_20160818_4_1857645" name="code" class="css">span#test3:after{
    content: '';
    display: inline-block;
    border-width: 4px 4px 0;
    border-color: #ccc #fff;
    border-style: solid;
    line-height: 0;
    overflow: hidden;
    position: relative;
    top: -6px;
    margin-left: 3px;
    height: 0;
    width: 0;
    overflow: hidden;
}

html代码略。