css画横线箭头_用纯CSS实现的箭头
用CSS即可绘制出各种箭头,无需裁剪图片,甚至没有用到CSS3的东西。对浏览器支持良好。
基本原理
原理非常简单,通过截取border(边框)的部分“拐角”实现,几行CSS代码即可理解:
一个梯形
当元素宽、高和边框的宽相近(等)时,改变某一边的颜色可以看到一个梯形;
#demo11 {
border: 10px solid #000;
border-left-color: #f00;
width: 10px;
height: 10px;
}
一个三角形
当元素宽、高为零,且其他边为透明颜色时,可以形一个三角形。
#demo12 {
border: 10px solid #000;
border-left-color: #f00;
width: 0;
height: 0;
}
任意角度的三角形
改变各个边的宽度,即通过调整“边框”厚度可以配置出任意角度
#demo14 {
border: 10px solid transparent;
border-left: 20px solid #f00;
width: 0;
height: 0px;
}
通过伪元素实现
三角形可以通过伪元素绘制出,而无需改变原来的DOM结构
文字内容
文字内容
#demo15{
position: relative;
}
#demo15:after {
border: 10px solid transparent;
border-left: 10px solid #f00;
width: 0;
height: 0;
position: absolute;
content: ' '
}
伪元素实现三角线箭头
通过伪元素绘制出的两个,一个与背景色相同覆盖部分红色箭头,形成三角线
文字内容
文字内容
#demo16{
position: relative;
}
#demo16:after, #demo16:before {
border: 10px solid transparent;
border-left: 10px solid #fff;
width: 0;
height: 0;
position: absolute;
top: 0;
right: -20px;
content: ' '
}
#demo16:before {
border-left-color: #f00;
right: -21px;
}
三角线分割的Tab页
文字内容 Tab1
文字内容 Tab2
文字内容 Tab3
- 文字内容 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;
}
css画横线箭头_用纯CSS实现的箭头相关推荐
- 纯css实现手风琴效果_创建纯CSS手风琴的4种方法
内容手风琴是一种有用的设计模式. 您可以将它们用于许多不同的事物:用于菜单,列表,图像,文章摘录,文本片段甚至视频 那里的大多数手风琴都依赖JavaScript,主要是jQuery ,但是由于高级CS ...
- css绘制卡券优惠券_用纯css来实现一个优惠券
前言 我们在平时的网页中,经常会见到这样的优惠券或者其他的券(特征就是会有反方向的圆角). 可能大部分前端人员为了简单,直接采用图片的方式,直接把整张图作为背景.其实这也没什么不好的,简单,方便,还没 ...
- css实现图片虚化_前端纯css 图片的模糊处理
最近做的一个项目需要用到背景图的模糊处理,在网上查资料,发现用css的 filter 属性就可以解决,但是因为模糊度比较高,四周会有很长的模糊边,百度上也没找到解决的方法,,可喜的是最后我在分析一个d ...
- css画横线箭头_用CSS绘制三角形箭头
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码:/* create an arrow that points up */ div.arr ...
- css画横线箭头_css 画带边框的箭头的问题
我圈调直年情,量的单框来离理这接法清都的为想要用css画一个如下图的箭需朋朋支带不新器功几的事上为做的和时意后头,带边框 思路很简单,用一个带坐上下边框的长方形,拼一个灰色的三角形,然后在用一个白色的 ...
- html怎么画3角型当背景,纯CSS画三角原理解析
纯CSS画三角原理解析 因为之前做一个页面出现了很多三角,开始直接用图片感觉并不是很好用,看着总是怪怪的颜色还很难调整的跟背景一样,就搜了一波代码直接用上了,事后想了一下感觉不知道具体原理是什么,很奇 ...
- css订单导航栏横线动画,小程序 纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...
- html select 样式t调整_用纯css改变下拉列表select框的默认样式
**社区评论 ( Beta版 )** #0 危汤讽 2015-04-02 09:57:05 firefox浏览器支持不好,貌似是浏览器bug 回复 #1 林甩土 2015-04-03 09:06:57 ...
- bootstrap4侧边栏_使用纯CSS和Bootstrap 4构建多个堆叠式粘性侧边栏
bootstrap4侧边栏 Making high performant, pure CSS sticky sidebars that stack with Bootstrap 4. 制作与Boots ...
- css 商城 两列_如何使用css伪元素实现超实用的图标库(附源码)
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识 伪元素 伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
最新文章
- 零基础python从入门到精通 pdf-100G Python从入门到精通全套资料!
- PAT甲级1056 Mice and Rice:[C++题解]模拟、排名
- kux格式怎么转换成mp3_把MP3格式的音频转换成WAV格式
- Kotlin的高阶函数和常用高阶函数
- Asp.NET大文件上传组件开发总结(二)---提取文件内容
- leetcode28. 实现 strStr()
- Webpack4干货分享(二),使用loader处理scss,图片以及转换JS
- 高级工计算机操作试题及答案,计算机系统操作高级工试题和答案[1]
- 调用codesoft,打印条码,批量连续打印,变量打印
- MTP管理才能发展专家
- 背景透明及引发的文字透明问题
- ssm项目之第三方QQ登陆
- CentOS7像外部163邮箱发送邮件
- Stimulsoft报表使用心得
- Shor’s Algorithm 学习笔记
- MySQL中 (GROUP BY 用法)和(ORDER BY用法)
- 南京大学java机试,2019南京大学计算机本科生开放日机试
- 线性拟合的 R2 和p值怎么计算
- 共路信令(CCS),随路信令(CAS)简介
- 本地系统服务例程:Nt和Zw系列函数