CSS实现三角形图标的原理
来源:互联网 发布:网络借贷排行 编辑:程序博客网 时间:2024/06/10 16:58
网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了)
之前以为是个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;}
将得到如下效果:
阅读全文
0 0
- CSS实现三角形图标的原理
- 终于搞懂了CSS实现三角形图标的原理
- 终于搞懂了CSS实现三角形图标的原理
- 搞懂了CSS实现三角形图标的原理
- 经典CSS实现三角形图标原理解析
- 经典CSS实现三角形图标原理解析
- css三角形的实现原理
- 纯CSS 实现三角形图标
- css实现三角形原理
- css实现三角形原理
- CSS的三角形实现
- 一个很好的三角形图标效果 css
- CSS:制作三角形的原理
- css绘制三角形图标
- css实现三角形,五角星,爱心等原理
- css的border实现三角形
- CSS绘制三角形的原理剖析
- CSS绘制三角形的原理剖析
- mybatis学习(三)--增删改查
- 二维数组中的查找
- 【Linux 内核网络协议栈源码剖析】系统网络协议栈初始化及数据传输通道建立过程
- DSP芯片的特点
- MySQL_005_基础_字符串
- CSS实现三角形图标的原理
- Qt主窗体显示最前 在delphi中使用Application.BringToFront;可以保证当前程序显示在最前。 然而今天在Qt中,没有类似函数供调用。 尝试了activeWindow,s
- 【环境搭建】Mac下 Intellij IDEA 2017 导入Eclipse/Myeclipse项目成功总结
- 微服务的简单入门
- Chess(DP)
- HTTP 错误代码含义
- 在 Eclipse 上配置tomcat7.0并创建工程发布
- 虚拟机下安装ubuntu后root密码设置
- 恢复Windows10应用商店