CSS3组件化之单线箭头
2024-09-13 02:35:57
<div class="parent-box"> <div class="top-arrow"></div> <div class="right-arrow"></div> <div class="bottom-arrow"></div> <div class="left-arrow"></div> </div>
.parent-box{ position: relative; width: 500px; height: 300px; } //箭头向上 .top-arrow { position: absolute; left: 50%; top:; overflow: hidden; zoom:; width: 12px; height: 12px; text-indent: -99999px; border-left: 0.05rem solid #b2b2b2; border-top: 0.05rem solid #b2b2b2; transform: rotate(45deg); -o-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); } //箭头向右,类似 > .right-arrow { position: absolute; right:; top: 50%; overflow: hidden; zoom:; width: 12px; height: 12px; text-indent: -99999px; border-right: 0.05rem solid #b2b2b2; border-top: 0.05rem solid #b2b2b2; transform: rotate(45deg); -o-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); } //箭头向下 .bottom-arrow { position: absolute; right: 50%; bottom:; overflow: hidden; zoom:; width: 12px; height: 12px; text-indent: -99999px; border-right: 0.05rem solid #b2b2b2; border-bottom: 0.05rem solid #b2b2b2; transform: rotate(45deg); -o-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); } //箭头向左,类似 < .left-arrow { position: absolute; left:; top: 50%; overflow: hidden; zoom:; width: 12px; height: 12px; text-indent: -99999px; border-left: 0.05rem solid #b2b2b2; border-bottom: 0.05rem solid #b2b2b2; transform: rotate(45deg); -o-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); }
最新文章
- java集合学生管理系统
- C 运算符优先级列表
- wget: unable to resolve host address的解决方法
- EM算法
- 泛型、Linq 查询使用
- 关于directX最近的学习方案
- mycat未配置对应表导致报错
- network: Android 网络判断(wifi、3G与其他)
- rtmp流媒体搭建的所需安装包
- Set 集合
- python简单制作GIF
- aspx页面控件id上自动加前缀
- linux >; 和 >;>; 、<; 区别
- 【FZSZ2017暑假提高组Day2】圆盘时钟
- xtrabackup 备份和恢复
- msfpayload反弹shell
- Xss和Csrf介绍
- this &; super
- 数据结构与算法JavaScript描述——栈的使用
- 金中欢乐赛 A题