css画横线箭头_用CSS绘制三角形箭头
用CSS绘制三角形箭头。使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头!
CSS代码:/* create an arrow that points up */
div.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent; /* left arrow slant */
border-right: 5px solid transparent; /* right arrow slant */
border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
}
/* create an arrow that points down */
div.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #2f2f2f;
font-size: 0;
line-height: 0;
}
/* create an arrow that points left */
div.arrow-left {
width: 0;
height: 0;
border-bottom: 5px solid transparent; /* left arrow slant */
border-top: 5px solid transparent; /* right arrow slant */
border-right: 5px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
}
/* create an arrow that points right */
div.arrow-right {
width: 0;
height: 0;
border-bottom: 5px solid transparent; /* left arrow slant */
border-top: 5px solid transparent; /* right arrow slant */
border-left: 5px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
}
绘制这些三角形的关键在于,你要让箭头所指方向的两个侧边有很粗的边框。而背向箭头方向的一边也是同样粗的边框,而这条边的颜色就是你的三角形的颜色。边框越粗,三角形越大。用这种方法你可以绘制出各种颜色、各种大小、各种朝向的箭头。最妙的是,你只需要几行CSS代码就能实现这种效果。
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网
css画横线箭头_用CSS绘制三角形箭头相关推荐
- html中怎么写正六边形,如何用css画正六边形?用css画正六边形的两种方法(代码实例)...
本章给大家介绍如何用css画正六边形?用css画正六边形的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在之前要先了解一下正六边形内角和边的关系,正六边形的每个 ...
- html css画五角星,css画梯形,css画五角星, css画六角星 ,css画六边形
css画梯形,css画五角星, css画六角星 ,css画六边形 css画梯形 .triangle { border-bottom: 100px solid #F36823; border-left: ...
- css画横线箭头_css 画带边框的箭头的问题
我圈调直年情,量的单框来离理这接法清都的为想要用css画一个如下图的箭需朋朋支带不新器功几的事上为做的和时意后头,带边框 思路很简单,用一个带坐上下边框的长方形,拼一个灰色的三角形,然后在用一个白色的 ...
- css 绘制三角形箭头
转载自:http://ourjs.com/detail/532bc9f36922aa7e1d000001 OurJS 阅读 全端 发布 订阅邮件 用纯CSS实现的箭头 分享到 分类 编程技巧 ...
- 3 vue 线条箭头_教程|PPT绘制箭头最全攻略,收藏一下!
微信公众号:有宝物的柜子编辑:落水无波 2020-05-02 原创 由于没有较好的方向,公众号的更新一直暂停,根据昨天的留言,今天更新一篇关于绘制各类箭头的PPT教程,希望帮到需要的同学. 那么,我们 ...
- css实现图片虚化_什么? CSS 阴影竟然还有这种骚操作 ?
点击上方"IT平头哥联盟",选择"置顶或者星标" 与你一起成长- 原作者:cocoqiao 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 f ...
- css设置按钮样式_使用CSS设置按钮样式的快速指南
css设置按钮样式 by Ashwini Sheshagiri 通过Ashwini Sheshagiri Buttons have become an inevitable part of front ...
- 使用HTML语言和CSS开发商业站点_初识CSS
第4章 初识CSS 一.CSS概述 1.什么事CSS CSS全称为层叠样式表(Cascading Style Sheet),通常又称为风格样式表(Style Sheet),它是 ...
- android百度地图箭头,百度地图API绘制带头箭头的折线
源代码: body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} #l-map{height:100%;wid ...
最新文章
- seaborn可视化条形图并按照降序排序条形图进行可视化Sort Bars in Barplot in Descending Order in Python
- 给phpcms v9增加类似于phpcms 2008中的关键词表
- AI公开课:18.05.16 周明博士(MSRA副院长)—北大AI第十一讲之《语言智能的进展》课堂笔记——你了解语言智能
- 第一次团队作业——团队展示
- JSF:直接从页面将参数传递给JSF操作方法,这是JavaEE 6+的一个不错的功能
- C++(STL):01---pair容器
- 学妹问,学网站开发还是打 ACM?
- 小米10正式发布:3999元起!
- linux 复制代码 多出了很多空格_最基础Linux(一)——简单命令行操作
- linux下qt制作日历,基于QT的多功能日历设计与开发.doc
- 基于XMPP协议的Android即时通信系
- Android_JNI编程入门
- unity2D笔记-控制人物相关
- 全排列回溯算法C语言,回溯算法(以全排列为例)
- WPF企业内训全程实录(上)
- 数值计算与MATLAB微积分
- ARM服务器搭载的操作系统
- excel如何打开多个独立窗口
- 使用飞信VMDotNet使C#程序脱离.NET FRAMEWORK也能运行的一些心得 ------(我复制别个的)
- Python基础+数据科学入门(三)组合数据类型
热门文章
- python连接elasticsearch查询数据
- Loaded runtime CuDNN library: 7102 (compatibility version 7100) but source was compiled with 7004
- python 调用c++返回char*
- mongodb,redis,mysql简要对比
- Win7下U盘安装Ubuntu14.04双系统
- python写用用户名密码程序_Python创建用户名和密码程序
- 博图读取温度的指令_1200读取温度巡检仪 16路
- 5g宣传方案_5G时代来了,VR如何玩转线上营销新模式
- Ngnix负载均衡安装及配置
- shell 调用mysql 存储过程_shell调用mysql的存储过程以及SQL