css实现箭头
又遇到要做箭头了,这次不想用背景图了,所以参考腾讯微博的箭头实现方法做了一下css。
实现效果:
代码:
.ARROW{z-index:1;width:16px;height:8px;position:relative;left:50%;top:0;margin-left:-8px;margin-bottom:-1px;overflow:hidden;}
.ARROW .upb{color:#D2D2D2;position:absolute;left:0;top:0;margin-top:0px;font-size:16px;font-family:Simsun;font-weight:normal;}
.ARROW .up{color:#fff;position:absolute;left:0;top:0;margin-top:1px;font-size:16px;font-family:Simsun;font-weight:normal;}
<div class="ARROW"><span class="upb">◆</span><span class="up">◆</span></div>
<div style="background:#fff;width:100px;height:100px;border:1px solid #d2d2d2;position:relative;">
</div>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步