文档章节

CSS实现三角形图标的原理

困觉的曼巴er
 困觉的曼巴er
发布于 2016/06/13 16:56
字数 529
阅读 13
收藏 0

网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了)

之前以为是个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;
}

 将得到如下效果:

本文转载自:http://itindex.net/detail/48725-css-三角形-图标

共有 人打赏支持
困觉的曼巴er
粉丝 1
博文 25
码字总数 12169
作品 0
其它
程序员
css实现toolTip

title 1,常用border来实现三角形 原理: 宽高都不设置(即为0),只设置边框,如果4个边框都设置宽度(border-width),样式(border-style)和颜色(border-color) 效果如图 上面看到的都是三角形,其实...

funnycoderstar
2017/09/27
0
0
css三角形原理

前言:   在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对...

羊皮卷
2016/12/13
10
0
浅析新浪微博:以css实现的小三角提示框

分析新浪微博就会发现一个有趣的带小三角提示框。先来看下效果图: 仔细查看代码才发现,并不是使用传统做法以图片的background属性实现,而是以两个"◆"菱形字符实现,这个菱形支持编码有G...

deep
2012/05/18
0
1
震惊!?css-border还能这么用!?

利用css中的border制作小三角形 总所周知,元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。 CSS border 属性允许规定元素边框的样式、宽度和颜色。 在 HTML 中,我们使用表格来...

尘年往沙
07/30
0
0
【JEECG技术文档】表单配置-树形表单

表单配置支持树型表单了,具体效果如下图: 配置说明: 1、是否树:选择是。 2、树形表单父Id:表的自关联外键。 3、树形表单列表:显示树形图标的列,如上图中为[组织机构名称]。 4、默认值...

Jeecg
02/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

根据进程名称杀死进程

ps -ef | grep keyword | grep -v grep | awk '{print $2}' | xargs kill -9 逐个分析: 1, ps -ef | grep keyword: 查出进程名含有 keyword 的所有进程; 2, grep -v grep: 从这些结果里面,把......

vinci321
20分钟前
0
0
nginx的简单使用:负载均衡

nginx:反向代理的服务器;用户发送请求到nginx,nginx把请求发送给真正的服务器,等待服务器处理完数据并返回,再把数据发送给用户。 nginx作为一个反向代理服务器,能缓存我们项目的静态文...

osliang
36分钟前
2
0
网站title标题被改并被百度网址安全中心提醒的解决办法

国庆假日期间我们Sine安全接到众多网站站长求助网站标题被改导致在百度搜索中百度安全中心提醒被拦截,导致网站正常用户无法浏览网站被跳转到一些菠菜du博网站,而且很明显的一个特征就是在百...

网站安全
38分钟前
1
0
JDK版本与major.minor version的对照关系

其实,只需要记住jdk6对于major.minor version 50即可,其他版本自行计算即可。 ---------------------

码代码的小司机
40分钟前
1
0
C++基础教程面向对象学习笔记及心得感悟[图]

C++基础教程面向对象学习笔记及心得感悟[图] 使用友元函数重载算术运算符: C ++中一些最常用的运算符是算术运算符 - 即加号运算符(+),减运算符( - ),乘法运算符(*)和除法运算符(/...

原创小博客
48分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部