纯CSS箭头

深藏阁楼爱情的钟 2022-06-08 07:44 221阅读 0赞

先看效果图：

![Center][]

代码如下：

<html> <head> <title></title> <style> .arbox { position: relative; top: -1rem; display: inline-block; margin-left: 2rem; float: left; margin-top: 1rem; } .box{ float: left; width: 3rem; height: 3rem; border: 1px solid #000; border-radius: 50%; line-height: 43px; margin-right: 10px; background-color: #02c8a7; text-align: center; color: #fff; position: relative; float: left; display: inline-block; margin-left: 1.5rem; top: 1rem; left: 2rem; margin-top: -2rem; } .arr { width: 0; height: 0; overflow: hidden; border-width: 0.7rem; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent #000; position: absolute; left: 2.1rem; } .block { background-color: #000; height: 0.5rem; left: 3px; overflow: hidden; position: absolute; top: 0.45rem; width: 2rem; } .container{ margin-top: 2rem; } </style> </head> <body> <div class="container"> <div class="box">导航</div> <div class="arbox"> <div class="arr"></div> <div class="block"></div> </div> <div class="box">导航1</div> </div> </body> </html>

[Center]: /images/20220608/37dda6288f80486daf7279bb02a9c9f0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，221人围观）

还没有评论，来说两句吧...

相关阅读

相关 css箭头

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h...

﹏ヽ暗。殇╰゛Y/ 2024年04月17日 06:06/ 0 赞/ 56 阅读

相关 css 箭头图标展示

div:after\{ content:''; border-top:9px solid \eaeaea; border-left: 12px solid trans

矫情吗；*/ 2023年06月26日 05:40/ 0 赞/ 13 阅读

相关纯css html代码,纯css3实现文字动画

先上代码，代码如下： css3动画 - daimami.com 示例文字关于一些属性的说明： css3中的动画功能分为transitions功能和animations

心已赠人/ 2022年10月06日 12:45/ 0 赞/ 240 阅读

相关 css画空心箭头

![image][] <i class="u-arrow u-arrow-left "> </i> .u-arrow { display: inli

悠悠/ 2022年07月17日 16:13/ 0 赞/ 260 阅读

相关纯CSS箭头

先看效果图： ![Center][] 代码如下： <html> <head> <title></title> <style> .arbox { p

深藏阁楼爱情的钟/ 2022年06月08日 07:44/ 0 赞/ 222 阅读

相关纯css绘制三角形

在当前流行的的网站上，我们经常会看到一些小三角形的下拉提示（微博顶部的下拉菜单），简单的方式可以使用一张图片代替，但是随着前端技术的发展，以及开发者对于前端性能的“吹毛求疵”，

刺骨的言语ヽ痛彻心扉/ 2022年06月05日 01:43/ 0 赞/ 289 阅读

相关 css 制作90°箭头

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

﹏ヽ暗。殇╰゛Y/ 2022年05月30日 06:53/ 0 赞/ 198 阅读

相关 css 备注箭头兼容ios

content: " "; position: absolute; right: 0; width: 0;

青旅半醒/ 2022年04月04日 18:48/ 0 赞/ 249 阅读

相关上下跳动的箭头 css

在H5场景动画时，常常会用到着一样一个效果，箭头持续上下跳动来引导用户上下滑动整个页面 ![复制代码][copycode.gif] <!DOCTYPE html >

Dear 丶/ 2022年03月28日 09:00/ 0 赞/ 277 阅读

相关 css上下左右箭头

代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

男娘i/ 2021年11月23日 14:54/ 0 赞/ 372 阅读