CSS绘制三角形原理及应用
更多精彩内容可以访问我的博客Aelous-BLog
在从 PSD 到 HTML 页面的过程中,免不了要遇到一个问题:“这个小图标,可以用 CSS 效果实现,也可以切图下来,到底该怎么选择呢???”
在此我个人的选择一般都是,用 CSS 实现,当然切图然后实现也是聪明人的办法,但是我觉得学好一个技术最关键的不是学习,而是使用。学了不用都是假把式。学了 CSS 有机会让你炫技,不用是大傻。
最常见的一类小图标就是三角形,今天我来总结一下用 CSS 实现三角形的原理。 网上相关资料较多,讲的也都很好,个人博客主要还是用于记录分享,毫无商业前景,不喜勿喷。
原理
CSS 盒模型
盒子模型包括了:margin-border-padding-content
其中,在上下左右的边框交界处,都形成了斜线,利用这一特性,我们可以通过设置不同的上下左右边框的宽度和颜色,可以得到小三角、小梯形等;调整宽度大小可以调节三角形的形状。
应用
示例 1
我们首先尝试上下左右颜色区分,并将 border 的宽度给大一点,看看效果。
div {height: 30px;width: 30px;border-width: 30px;border-style: solid;border-color: #cd1076 #bf3eff #b3ee3a #6495ed;
}
示例 2
接下来我们把 content 宽度设置为 0
div {height: 0;width: 0;border-width: 30px;border-style: solid;border-color: #cd1076 #bf3eff #b3ee3a #6495ed;overflow: hidden; /* 这里设置overflow, font-size, line-height */font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
}
这时我们可以看到,已经出现了四个颜色不同的三角形了。
示例 3
接下来我们把其中三种颜色设置为和背景颜色一样,只保留一种颜色的对比,代码如下:
div {height: 0;width: 0;border-width: 30px;border-style: solid;border-color: #cd1076 transparent transparent transparent;overflow: hidden;font-size: 0;line-height: 0;
}
IE6 下
在 IE6 下,不支持透明,需要将余下三条边的 border-style 设置为 dashed 即可。
代码如下:
div {height: 0;width: 0;border-width: 30px;border-style: solid dashed dashed dashed;border-color: #cd1076 transparent transparent transparent;overflow: hidden;font-size: 0;line-height: 0;
}
示例 4
同理,我们消去相邻的两个三角形,会得到一个以对角线为斜边的大三角形。
div {height: 0;width: 0;border-width: 30px;border-style: solid dashed dashed dashed;border-color: #cd1076 #bf3eff transparent transparent;overflow: hidden;font-size: 0;line-height: 0;
}
示例 5
这样我们设置 border-width 为不同的值:
div {height: 0;width: 0;border-width: 20px 40px 30px 20px;border-style: solid;border-color: #cd1076 transparent transparent transparent;overflow: hidden;font-size: 0;line-height: 0;
}
效果如下:
就是说我们只要设置不同的宽度值,可以得到任意形状的三角形,完美。
注意:用来绘制三角形的必须是 block 元素。
参考
CSS 三角形的实现原理及运用
css3 实现三角形、扇形和特殊的形状等
更多精彩内容可以访问我的博客Aelous-BLog
CSS绘制三角形原理及应用相关推荐
- CSS绘制三角形图标
CSS绘制三角形图标目录 1CSS绘制三解形图标原理 2 页面效果 3 HTML结构 4 CSS样式 1CSS绘制三解形图标原理 对内容容器进行相对定位,对内容容器的伪元素:before和:after ...
- HTML之CSS画三角形原理
在进行WEB应用开发的过程中,我们经常会需要使用到三角形图标,例如下面这个下拉选择控件右侧的收缩箭头. 又或者像下面这种情形. 搜索网络之后发现三角形可以通过以下CSS代码实现: #triangle_ ...
- css画横线箭头_用CSS绘制三角形箭头
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码:/* create an arrow that points up */ div.arr ...
- html css右下角三角形,纯CSS绘制三角形(各种角度)
CSS/HTML 的 纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
- css 绘制三角形_解释CSS形状:如何使用纯CSS绘制圆,三角形等
css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...
- html div三角形,【div】纯CSS绘制三角形
原标题:[div]纯CSS绘制三角形 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使 ...
- CSS实现三角形原理及过程
CSS实现三角形原理及过程 在开发中,遇到很多的列表都需要用到三角形的箭头,可以直接用一个图片作背景铺垫,但这样占用一定的内存,对于这种简单的图形纯CSS也能实现,它占用的内存相对图片较小,所以相比而 ...
- 使用html+CSS绘制三角形
使用html+CSS绘制三角形 前言 一.绘制正方形 二.进行外边框填充 三.把盒子的宽高设置为0 四.要哪边的三角形就把哪边设置为透明 五.最终化简代码 前言 使用html+CSS绘制三角形,三角形 ...
- CSS绘制三角形的原理剖析
今天学习Bootstrap时候,看到按钮的向下三角形源码: .caret {display: inline-block;width: 0;height: 0;margin-left: 2px;vert ...
最新文章
- 小游戏编程代码复制_少儿编程是不是来玩游戏?这个到底要学多久?
- 如何成为一个卓越的程序员
- java中数据结构的应用_Java集合入门 (二)常用数据结构和应用场景-数组
- Squid 访问控制配置
- 简述 maven 命令 package、install、deploy 的区别
- STM32工作笔记0012---认识老化试验
- 详解 EnumWindows 与 EnumWindowsProc - 回复 SplendourChiang 的问题
- python爬虫Day1(requests基本使用)
- Java基础,Java的main方法与构造方法之间的联系,以及构造方法的联系和使用,栈堆理解
- 利润表模板excel_财务EXCEL必修课 (20小时)
- Python之通过API获取数据库数据及图片
- 华为硬件工程师手册_华为认证GaussDB OLTP数据库高级工程师正式发布
- tolower()函数用法
- Redis和MongoDB的区别(面试受用)
- MxN螺旋矩阵(由外向内)
- Silverlight开发历程—(绘制放射渐变图形)
- NFT是登记在区块链上的所有权证书
- 【C语言】案例四十六 点名册(二)【strcpy()函数】
- virtual 关键字
- 软件开发专业需要学习多少年