用CSS怎样实现三角形和箭头的小图标效果?在网站设计中,我们经常会需要使用到一些小图片,但是如果网站的图片太多,不仅不好管理,而且还会拖累网站的速度,因此,很多时候我们会使用一些简单的标签样式来实现简单的图形标志来替代图片,这篇给大家分享三角形和箭头的小图标效果的实现。
实例展示:
三角形示例
示例代码:
<style type="text/css"> .triangle b { border: 5px solid #fff; border-left: 5px solid #353535; margin: 0; font-size: 0; } </style>
方向箭头示例
示例代码:
<style type="text/css"> .mark b{border:solid #D0D0D0;width:6px;height:6px;display:inline-block;} .mark b.lmark{border-width:2px 2px 0 0;transform: rotate(45deg);} </style>
空缺圆
*{ padding:0; margin:0; } div:before{ content:""; width:20px; height:20px; position:absolute; top:-10px; left:40px; border-radius:50%; background-color:white; } div{ position:relative; width:100px; height:100px; margin:100px auto; box-shadow:0 0 2px red; background-color:#ccc; }
以上就是用CSS实现三角形和箭头的小图标效果的介绍,感兴趣的朋友可以参考上述代码,当然还能实现更多的小图标样式,大家可以自己来尝试看看,如果想要了解更多,也可以继续浏览群英网络其他相关的文章。
文本转载自脚本之家
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理