【CSS】终于搞懂了CSS实现三角形图标的原理

admin

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

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

将得到如下效果：

admin

弘帝总结经验如下：
制作三角形
首先border对象的宽高为0，即对象width:0;height:0
第二步：Border-style:solid
第三步：border-width指定厚度，确定哪几个边需要有边框，正三角为左右底部
第四步：对指定边框厚度的哪两边进行透明处理，比如正三角，需要对左侧与右侧进行透明，第二步：border-color指定左右两侧为透明transparent，于是得出只有底有边框，才能形成正三角
那么正三角的CSS如下：
border-style:solid;
border-width:0 30px 30px;
/*顶部不需要有边框故为0px，第二个30px特指左右两个边框，第三个为底部边框30px*/
boder-color:transparent,transparent,#f00
/*顶部不需要有边框故为0px，第二个30px特指左右两个边框透明，第三个为底部边框30px为红色*/
这样就行成了一个边框，左上，右上无色的小三角了

看不懂上面的？不要紧，复制粘贴下面的就可以了
正三角CSS：
width:0;
height:0;
border-width:0 30px 30px;
border-style:solid;
border-color:transparent transparent #333;
也可以这么写
width:0;
height:0;
border-right:10px solid transparent;
border-bottom:10px solid #005A92;
border-left:10px solid transparent;

倒三角CSS的写法这里略过，应该不难。
方法是底部无边框，顶部有边框，左右边框透明
左三角CSS思路是右侧边框，上下边框透明
右三角CSS思路是左侧边框，上下边框透明