splitpane如何设置竖条的宽度_如何用 CSS 画三角形和箭头
三角形和箭头这两个图标在网页中经常会用到,例如:下拉选择框、排序、返回到上一页、导航条,分页都会用到三角形或者箭头,当然是用图片的方式的确可以实现这一样式,但是是用图片如果调整颜色那就比较困难了,除非再做一张图片,这样的做不仅浪费开发成本并且会降低网页性能。我们可以采用 CSS 画出三角形或者箭头:
使用 border 画三角形和箭头
一条边框在和模型中其实并不是一条线,如果我们将边框设置得足够大,并且设置不同的颜色,我们就很容易看到边框的本质,从下图很容易可以看出其事 border 在一个正方形 DOM 上其实是一个梯形:
画三角形
利用这一原理我们可以将 DOM 的高和宽设置为 0 像素,通过设置边框的颜色透明来画出不同的三角形,当然也可以来设置 border 的宽度来画出不同角度的三角形:
.triangle {width: 0;height: 0;border-top: 50px solid #ccc;border-left: 50px solid transparent;border-right: 50px solid transparent;
}
画箭头
那么如何才用 border 来画箭头呢,只需要用一个三角形边框(颜色需要和背景颜色一致)来重叠挡住另外一个三角形边框即可。
优势和缺点
- [优势]兼容 IE;
- [优势]颜色可控;
- [缺点]不能画出空心透明的三角形;
- [缺点]高度和宽度很难控制,需要一定的计算;
使用 transform 和 border 画三角形和箭头
CSS 3 的出现,让 DOM 有了变形的效果,我们可以通过一些简单的旋转变形来画出三角形或者箭头。
画箭头
利用边框加上旋转,我们设置两个相邻的边框,然后做 45 度的旋转,这样就可以得到不同类型的箭头了:
.arrow {width: 50px;height: 50px;border-top: 5px solid #ccc;border-left: 5px solid #ccc;transform: rotate(45deg)
}
画三角形
如果要画三角形的话,我们需要在这个箭头上增加一条边长线就可以了。
优势和缺点
- [优势]颜色可控;
- [缺点]不能画出实心的三角形;
- [缺点]高度和宽度很难控制,需要一定的计算;
- [缺点]不兼容低版本 IE
其它方式
当然还有其它的方式来画三角形和箭头:
- Canvas
- SVG
- CSS 点阵
总结
这两种画法都存在有有缺点,应该根据具体的应用场景来确定使用哪种方式。当然我们之所以采用 CSS 来画一些图形,是因为我们在模块化和性能上做考虑,尽量在组件级别的 CSS 少使用图片。
splitpane如何设置竖条的宽度_如何用 CSS 画三角形和箭头相关推荐
- splitpane如何设置竖条的宽度_页面中有间隔的方格布局如何完美实现?
来源 | https://juejin.cn/post/6897794764444762120 典型的布局示例: 如上图所示的布局,方格中间有一定的间隙,间隙是固定的.应该如何布局会更加完美呢,比如要 ...
- css竖向箭头符号_如何用css实现三角形符号代码
展开全部 CSS/*向上的三角*/ .arrow-up { width:0; height:0; border-left:30px solid transparent; border-right:30 ...
- cad怎么画坐标系箭头_怎样用CAD画一个路标箭头?,来学习吧
在高速道路上我们经常会看到一些路标箭头,其实那些路标箭头是可以用CAD来画的.那么怎样用CAD画一个路标箭头呢?下面就让小编来给大家介绍一下吧,希望对大家有所帮助. 操作方法 01 打开CAD软件,操 ...
- 树型列表结构宽度调整_如何用Axure画出Web产品的列表组件:基础画法
Web产品的列表组件在画原型的时候比较常见,所以PM有必要深入了解它的各种交互效果和对应的原型画法. 除了通过表格来画出简单列表之外,我们还可以通过中继器来画出列表,相应的原型效果请查看https:/ ...
- axure按钮切换颜色_如何用Axure画出Web产品的列表组件:基础画法
Web产品的列表组件在画原型的时候比较常见,所以PM有必要深入了解它的各种交互效果和对应的原型画法. 除了通过表格来画出简单列表之外,我们还可以通过中继器来画出列表,相应的原型效果请查看https:/ ...
- 用python画耳朵_如何用python画猪头
用python画猪头的方法:首先设置画布和画笔,代码为[a.screensize(400,300)a.setup(width=400,height=300)]:然后画脸型,代码为[.goto(-100 ...
- python turtle画动物_如何用python画简单的动物
首先来看一下实现效果,如下图:程序猿的生活:Python入门到精通资料大汇总,不啰嗦,全是珍藏资料!zhuanlan.zhihu.com 具体实现代码请看: # -*- coding:utf-8 - ...
- 用python画机器猫代码_如何用Python画一只机器猫?| 原力计划
原标题:如何用Python画一只机器猫?| 原力计划 作者 | 人邮异步社区 责编 | 胡巍巍 出品 | CSDN博客 自信心是成功的源泉,对刚入门编程行业的初级程序员来说,多敲代码多做项目就是构建自 ...
- php饼图只有一个小方块_如何用Python画一个好看的饼图
这是一个关于画一个饼图的故事......话说在一个月黑风高的夜晚,笔者肚子饿了,脑海中回想起画饼充饥的典故,于是打算.... 成功冷到自己...... 好吧进入正题,这次我们来说说怎么用python画 ...
最新文章
- 09最短小说:意见统一
- 数据企业IBM段仰圣:大数据关键是“分析”
- Kaggle API
- asterisk的NAT配置
- 23种经典设计模式都有哪些,如何分类?Java设计模式相关面试
- 图片切换效果2(定时+左右按钮)
- Python GUI 截图小工具 实例Demo
- 如何关闭/删除vs2005的实时调试器?
- Beetle简单构建TCP服务
- 双目测距理论及其python实现
- 从CI/CD持续集成部署到DevOps研发运维一体化
- 日记侠:你的文章为什么阅读量会那么高?
- 神武授权位置服务器,太古封魔录神武获得,神武服务器入口
- 2020年高教社杯全国大学生数学建模竞赛题目D题 接触式轮廓仪的自动标注
- Android4: Write Storage权限问题
- opencv cv2.THRESH_OTSU 二值化
- linux0.11缓冲区管理程序阅读注释笔记
- Python 内置turtle模块 —— 画一面国旗(基础篇)
- Bootstrap响应式Web开发(一)
- C语言-求各位数之积(简易版)
热门文章
- LeetCode--88.合并两个有序数组(插入法,排序法)
- 50. Pow(x, n)(递归,穷举)
- 查看端口命令及端口功能详解
- ubuntu 12.04安装与配置
- ssr Android简书,react服务端渲染ssr
- octotree插件 --- 将 Github 项目代码以树形格式展示
- 控制台输入一个整数,取该整数的各位数,判断其是否能被该整数整除,能则返回true,不能则返回false
- 高新园区到大连计算机学校,教育局 | 高新园区2018指标分配表及大连各区指标到校表(附:现行大连指标名额分配方案)...
- _int64_在Linux对应对文件,linux下32位机与64位机基本数据类型长度对比
- 【AtCoder】AGC009