css制作小标志

Posted naturl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css制作小标志相关的知识,希望对你有一定的参考价值。

空心箭头:示例图片技术图片

<b class="bottom"><i class="bottom-arrow1"></i><i class="bottom-arrow2"></i></b>
.post_list .spread .bottom{
    width:20px;
    height:20px;
    position:absolute;
    left:24px;
    top: .06rem;
    z-index: 2;/*兼容ie8-*/
}
.post_list .spread .bottom-arrow1,.bottom-arrow2{
    width:0;
    height:0;
    display:block;
    position:absolute;
    left:0;
    top:0;
    z-index: 5;/*兼容ie8-*/
    border-bottom:.13rem transparent dashed;
    border-left:.13rem transparent dashed;
    border-right:.13rem transparent dashed;
    border-top:.13rem white solid;
    overflow:hidden;
}
.post_list .spread .bottom-arrow1{
    top:1px;/*重要*/
    border-top:.13rem blue solid;
}
.post_list .spread .bottom-arrow2{
    border-top:.13rem white solid;
}

实心向下箭头:示例图片技术图片

<div class="test"></div>
.test{
    display: inline-block;
    vertical-align: middle;
    margin-top: -1px;
    margin-left: 6px;
    margin-right: -14px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #ccc;
}                    

 

以上是关于css制作小标志的主要内容,如果未能解决你的问题,请参考以下文章

使用CSS3制作三角形小图标

20+ css高频实用片段,提高幸福感的小技能你可以拥有噢

程序员过中秋丨用代码制作一个祝福小网页(html+css)

CSS3标志动画?

制作网页的属性面板有HTML选项和CSS选项,两个有啥区别?

使用CSS和Javascript制作标签