css三角原理
2016-01-20 12:55
211 查看
原文 http://itindex.net/detail/48725-css-三角形-图标
网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了)
之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实现这种效果。没想到用CSS也能实现这个效果。
看了下源码是这样的:
.caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; }
研究一番之后,发现原理是这样的:
首先,需要把元素的宽度、高度设为0。
然后设置边框样式。最关键的也在这里。
这里我们先做一个实验,如果一个元素具有下列样式:
{ width: 0; height: 0; border: 4px solid; }
效果是什么?没错是个正方形:
因为元素宽度、高度都为0,只有4px的边框,于是变成了上面的效果。
再来,我们把样式改成下面这样:
{ width: 0; height: 0; border-top: 40px solid #000; border-right: 40px solid #ff0000; border-left: 40px solid #ff0000; border-bottom: 40px solid #000; }
这会是什么效果呢?可能你不会想到:
这是为什么呢?我们打个比方,有四块红色和黑色的木板代表元素的四个边框,把他们两横两竖重叠起来,这时候他们在二维平面的投影便成了上面的效果。
说到这里,大家该明白了上面的三角形图标是怎么来的了吧:元素没有下边框,而左右边框又是透明的,相当于只有上图中的上面的黑色三角形部分。
所以,如果我们要做倒立三角形、向右的、或者向左的三角形,只需要为三角形底部设置边框,两腰边框透明即可。
例如:
{ width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid #ff0000; border-bottom: 40px solid transparent; }
另外,如果我们把样式改成这样:
{ width: 0; height: 0; border-top: 40px solid #000; border-right: 30px solid #ff0000; border-left: 50px solid #ff0000; border-bottom: 25px solid #000; }
将得到如下效果:
相关文章推荐
- IOS 设置导航栏全局样式
- 自定义样式 实现文件控件input[type='file']
- html定义input type=file 样式的方法
- CSS基础:text-overflow:ellipsis溢出文本的显示样式
- :nth-child(css3的伪类选择器)
- css段落首行缩进,文字间距
- 终于搞懂了CSS实现三角形图标的原理
- css3动画简介以及动画库animate.css的使用
- 利用css中的em实现弹性页面布局
- Css中的px em rem区别
- 页面加载顺序及解析流程分享
- css全局样式覆盖默认的样式
- coocsstudio使用经验,导出资源
- lc_switch插件实现苹果IOS风格单复选框样式按钮
- CSS3中的rem值与px之间的换算
- CSS3网格布局基础知识 - 弹性尺寸的定义单位:fr 简介及实例
- CSS(Cascading Style Shee)
- css设置table里面单元格强制换行和强制不换行
- 【HTML打卡】0119css 文字、图片、控制器、引入方式、初始化
- CSS的::selection使用方法