html 上下左右箭头按钮,css 上下左右箭头
1、正常设置边框的div
.normal {
width: 50px;
height: 50px;
border-width: 5px 5px 5px 5px;
border-color: red blue yellow green;
border-style: solid;
background-color: gray;
}
效果:
2、向下的箭头 类似于 V
.arrow-down
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
font-size: 0;
line-height: 0;
}
效果:
3、向上的箭头,类似于A,只有三个边,不能指定上边框
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent; /* 左边框的宽 */
border-right: 5px solid transparent; /* 右边框的宽 */
border-bottom: 5px solid #2f2f2f; /* 下边框的长度|高,以及背景色 */
font-size: 0;
line-height: 0;
}
效果:
4、向左的箭头: 只有三个边:上、下、右。而
.arrow-left {
width: 0;
height: 0;
border-bottom: 15px solid transparent; /* 下边框的高 */
border-top: 15px solid transparent; /* 上方边框的高 */
border-right: 10px solid yellow; /* 右边框的长度|宽度,以及背景色 */
font-size: 0;
line-height: 0;
}
效果:
5、向左的箭头: 只有三个边:上、下、右。而
.arrow-right {
width: 0;
height: 0;
border-bottom: 15px solid transparent; /* 下边框的高 */
border-top: 15px solid transparent; /* 上方边框的高 */
border-left: 60px solid green; /* 左边框的长度|宽度,以及背景色 */
font-size: 0;
line-height: 0;
}
效果:
参考:
http://79px.com/html-css/61
html 上下左右箭头按钮,css 上下左右箭头相关推荐
- css加号图标_纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)...
三角形 .box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transpa ...
- java里面判断上下左右,KeyDown识别左右方向箭头键,但不能上下
使用下面的代码,左箭头键和右箭头键按预期运行,但不识别向上和向下箭头(单步执行它,在适当的情况下满足前两个条件,但后两个条件永远不会): private void textBox1_KeyDown(o ...
- html三角形图标,纯css三角形和css三角箭头实例代码
css箭头实例demo 纯css三角形和css三角箭头,可以随意放大缩小,可以随意颜色,这要比图片实现的三角箭头或者三角形状要灵活的多. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不 ...
- swiper切换按钮位置改变_swiper插件自定义切换箭头按钮
不知道大家在使用swiper时有没有遇到这样一种需求,swiper插件自定义切换箭头按钮,话不多说,直接上gif. 也就是需要把左右切换的箭头移到容器的外面,自定义箭头的样式. 给swiper容器再加 ...
- html向左箭头样式,详解Bootstrap的纯CSS3箭头按钮样式
简要教程 这是一款基于Bootstrap的纯CSS3箭头按钮样式.该按钮通过修改原生Bootstrap的按钮样式,来生成指向左侧或右侧的箭头按钮. [相关视频推荐:Bootstrap教程] 安装 可以 ...
- js window.onresize的使用方法及案例:导航随浏览器宽度改变而控制显示导航个数及箭头按钮的显隐
onresize 事件 onresize 事件会在窗口或框架被调整大小时发生. 最近遇到一个需求:PC站,头部导航,初始只有几条数据,但后来数据增加,分辨率低的小显示器显示不全: 思考:解决这个问题, ...
- react CSS实现箭头图标
参考链接: css3实现小箭头,各种图形 https://blog.csdn.net/tangtang5963/article/details/51490107 针对于三角形图标,以前的做法基本上是以 ...
- 蓝色箭头间隔css导航菜单代码
蓝色箭头间隔css导航菜单代码 演示图片: 详细代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- 在UIToolbar上创建左箭头按钮(如UINavigationBar的“后退”样式)
本文翻译自:Creating a left-arrow button (like UINavigationBar's "back" style) on a UIToolbar I' ...
- html按钮添加下拉箭头,如何实现工具栏的下拉箭头按钮
如何实现工具栏的下拉箭头按钮 作者/ 论坛中有人曾经问过这样的问题:如何在C++/MFC程序中实现类似IE工具栏中带下拉箭头的按钮,如图一所示: 图一 IE工具栏中带下拉箭头的按钮 本文将告诉你如何实 ...
最新文章
- 人脸识别虽好,还需行业自律与法律监管有道
- 货拉拉周胜馥,这次赌“输”了?
- nodejs+grunt配置记
- 公网对讲机修改对讲机程序_更少的对讲机,对讲机-更多专心,专心
- php mysql练手_ThinkPHP5练手Demo实战
- cordova插件(github版)
- 59. Spiral Matrix Spiral Matrix II
- [转] 深入浅出oracle锁---原理篇
- java 读取clob字段的几种方法
- 计算机辅助编程可分为,计算机辅助编程的特点及类型
- php毕设周记_平面设计毕业设计周记
- C# wpf NotifyIcon空间模仿qqz最小化,关闭功能(12)
- Edraw Max(亿图图示)新手福音:教你思维导图的简单画法!
- 服务器修改硬盘顺序,服务器硬盘阵列硬盘顺序
- unturend服务器修改背包,Unturned背包属性介绍
- java swing tooltips_【Unity笔记】提示框ToolTips大小自适应,及其闪烁的问题
- 梦三国解析服务器spl文件头失败怎么解决,梦三国手游野区BUFF点解析 野区BUFF怎么的打...
- SD-WAN基本介绍
- gpedit.msc 打不开
- [Pytorch框架] 5.2 Pytorch处理结构化数据