纯CSS箭头

深藏阁楼爱情的钟 2022-06-08 07:44 164阅读 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 条评论，164人围观）

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

相关阅读

相关 css 手写返回箭头

因为在开发App时，为了自定义返回栏，返回箭头，一般都用图片，当图片不方便，最好用css样式实现。画出一个正方形，让它旋转45度，只显示你需要的两个边即可。

绝地灬酷狼/ 2024年04月22日 15:23/ 0 赞/ 31 阅读

相关纯css手风琴

*漂亮手风琴** <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

以你之姓@/ 2024年04月17日 20:26/ 0 赞/ 36 阅读

相关 css箭头

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h...

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

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

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

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

相关 css画空心箭头

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

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

相关纯CSS箭头

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

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

相关 css 制作90°箭头

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

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

相关 css 备注箭头兼容ios

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

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

相关上下跳动的箭头 css

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

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

相关 css上下左右箭头

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

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