html中怎么写小箭头,纯CSS代码实现各种小箭头
我们知道,一般网页中的箭头大多是图片图标,字体图标流行以后也有很多改用字体图标。而实际上用CSS即可绘制出各种箭头,无需裁剪图片,甚至没有用到CSS3,所以浏览器兼容性良好。
基本原理
原理非常简单,通过截取border(边框)的部分“拐角”实现,几行CSS代码即可搞定。
绘制梯形
当元素宽、高和边框的宽相近(等)时,改变某一边的颜色可以看到一个梯形,不理解?我们来看实例:
#demo11 {
border: 10px solid #000;
border-left-color: #f00;
width: 10px;
height: 10px;
}
绘制三角形
实例宽高均为10像素,当元素宽、高为0,且其他边为透明或与背景颜色相同时,就可以形一个三角形,至此小箭头已成,来看实例:
#demo12 {
border: 10px solid transparent;
border-left-color: #f00;
width: 0;
height: 0;
}
改变各个边的宽度,即通过调整“边框”厚度则可以配置出任意角度,调整显示哪一条边框则可以决定箭头方向:
#demo14 {
border: 10px solid transparent;
border-right: 20px solid #f00;
width: 0;
height: 0;
}
如果不想改变原有的DOM结构和增加新的标签,三角形还可以通过伪元素绘制出:原本内容
#demo15{
position: relative;
}
#demo15:after {
border: 10px solid transparent;
border-left: 10px solid #f00;
width: 0;
height: 0;
position: absolute;
content: ' '
}
既然用到了伪元素,那么我们就可以通过伪元素绘制出2个三角形,其中一个与背景色相同错开1个像素覆盖有颜色部分箭头,即可形成三角线,下面来看三角线分割的Tab页实例:
- 文字内容 Tab1
- 文字内容 Tab2
- 文字内容 Tab3
#demo17{
font-size: 10px;
height: 24px;
}
#demo17 li {
float: left;
position: relative;
list-style: none;
margin: 0 20px 12px -19px;
border-top: solid 1px #ddd;
border-bottom: solid 1px #ddd;
padding-left: 12px;
}
#demo17 li:after, #demo17 li:before {
border: 10px solid transparent;
border-left: 10px solid #fff;
width: 0;
height: 0;
position: absolute;
top: 0;
right: -18px;
content: ' '
}
#demo17 li:before {
border-left-color: #ddd;
right: -19px;
}
最后再介绍一种组合效果,模仿聊天对话框,使用三角形跟矩形组合成提示框:
#demo {
width: 100px;
height: 100px;
background-color: #ccc;
position: relative;
border: 4px solid #333;
}
#demo:after, #demo:before {
border: solid transparent;
content: ' ';
height: 0;
left: 100%;
position: absolute;
width: 0;
}
#demo:after {
border-width: 9px;
border-left-color: #ccc;
top: 15px;
}
#demo:before {
border-width: 14px;
border-left-color: #333;
top: 10px;
}
html中怎么写小箭头,纯CSS代码实现各种小箭头相关推荐
- html中展开的小箭头,纯css实现各种方向小箭头
原理:一个高宽相等的正方形,选取你所需要的某一边,截取之,就是一个梯形,当高宽都为0,且其他边为透明颜色时,一个三角形就出来了 梯形 Document .arrow { width: 10px; he ...
- 纯 CSS 实现三角形尖角箭头的实例
为什么80%的码农都做不了架构师?>>> 上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/ ...
- css 实现一个尖角_纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 ,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码: 无标题文档 .area { margin:100px a ...
- 微信小程序纯css实现刻度尺
微信小程序纯css实现刻度尺 最近需要实现一个高度定制的刻度尺,但是网上现成的方案却是极少,最终找到了HaoTian的wx-scale.但是没有实现竖向的效果而且刻度范围大时,在安卓机上无法渲染完全( ...
- html如何制作小圆点,纯CSS实现小圆点和三角形图案
纯CSS制作三角形和小圆点 .arrowbox{width:40px;height:30px;background: #333;padding:10px;position: relative;text ...
- Snake贪吃蛇小游戏纯js代码
Snake贪吃蛇小游戏纯js代码 先给个效果图,一样的简单而又纯朴,回归贪吃蛇最原始的状态 还是先分析一下,使用面向对象编程真的降低了编程的难度(只要前期把思路想好,各个类,属性,方法抽象出来),就真 ...
- [css] 使用纯CSS代码实现动画的暂停与播放
[css] 使用纯CSS代码实现动画的暂停与播放 一个属性:animation-play-state 取值:paused(暂停)|running(播放) hover取代点击 .stop:hover~. ...
- 酷炫纯CSS代码实现时空穿梭动效
效果展示: 使用场景,可以用于大数据大屏背景,或者是穿越动画的过渡,下载地址在文章末尾 项目目录结构: html部分: <!doctype html> <html> & ...
- 纯css代码画的铅笔
下载地址 纯css代码画的铅笔,在网页上画一个铅笔图画. dd:
- 纯css实现各种方向小箭头
在开发页面的时候,遇到很多的列表都需要用到箭头,可以直接用图片作背景铺垫,纯CSS也能实现,并且没有兼容性顾虑,不用CSS3,相比而言,比图片更好用. 原理:一个高宽相等的正方形,选取你所需要的某一边 ...
最新文章
- php如何判断当前的操作系统是linux还是windows
- 动态匹配路由的基本用法||路由组件传递参数
- ASP.NET服务器应用程序不可用
- 一个墙纸还可以改变使用裁剪工具改变图像
- linux系统中安装python_2. Linux 下安装python
- coreboot学习8:ramstage阶段之资源分配流程
- 用canvas实现手写签名功能
- 玩Elastix遇到的几个问题和解决办法。
- Android webview上传图片(适配3.0,4.0,5.0,6.0)
- 地理编码的概念及作用
- Python全栈自动化测试--Pycharm专业版安装
- Pandas读取csv
- 缓存面试五连击(下篇)
- 女生自学计算机方向建议
- 注册时要求获取手机短信码的实现(java)
- 输入偏置电流时钟馈通
- java采用降低图片分辨率大小来压缩图片大小
- Golang项目 Go Build时报错
- 个人服务器制作教程,个人网站反代服务器架设教程
- 【Spring Security OAuth2笔记系列】- Spring Social第三方登录 - QQ登录下