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制作小标志的主要内容,如果未能解决你的问题,请参考以下文章