言

还在用图片制作箭头，三角形，那就太lou了。css可以轻松搞定这一切，而且颜色大小想怎么变就怎么变，还不用担心失真等问题。

先来看看这段代码:

/**css*/
.d1{
 width: 0; 
 height: 0; 
 border: 100px solid #339933;
}
/**html*/
<div class="d1"></div>
/**css*/
.d2{
 width: 0; 
 height: 0;
 border-width: 100px;
 border-style: solid;
 border-color:#FFCCCC #0099CC #996699 #339933;
}
/**html*/
<div class="d2"></div>

看了这两段代码，和效果图，是不是有一点眉目了？原来画三角形，只需要用元素的`border`来控制就可以了，`border-with`控制大小， `border-style`控制样式（实线、虚线等）， `border-color`控制颜色，分上、右、下、左

三角形示例

向下三角形

/**css*/
.d3{
 margin-left: 10px;
 float: left;
 width: 0; 
 height: 0;
 border-width: 100px;
 border-style: solid;
 border-color:#FFCCCC transparent transparent transparent;
}
/**html*/
<div class="d3"></div>

向左三角形

/**css*/
.d4{
 margin-left: 110px;
 float: left;
 width: 0; 
 height: 0;
 border-width: 100px;
 border-style: solid;
 border-color: transparent #0099CC transparent transparent;
}
/**html*/
<div class="d4"></div>

这里的`transparent`是透明的意思

接下来两种就留给聪明的你了，相信你可以的，动手才知道原来这么简单！

其实我们还可以通过，一种样式，来实现不能角度的三角形，那就是利用CSS3里面的旋转`transform:rotate(90deg)`。

/**css*/
.d4{
 margin-left: 110px;
 float: left;
 width: 0; 
 height: 0;
 border-width: 100px;
 border-style: solid;
 border-color: transparent #0099CC transparent transparent;
 transform: rotate(90deg); /*顺时针旋转90°*/
}
/**html*/
<div class="d4"></div>

箭头示例

向左箭头

/**css*/
.left{
 position: absolute;
}
.left:before,.left:after{
 position: absolute;
 content: '';
 border-top: 10px transparent dashed;
 border-left: 10px transparent dashed;
 border-bottom: 10px transparent dashed;
 border-right: 10px #fff solid;
}
.left:before{
 border-right: 10px #0099CC solid;
}
.left:after{
 left: 1px; /*覆盖并错开1px*/
 border-right: 10px #fff solid;
}
/**html*/
<i class="left" ></div>

是不是发现箭头和三角形是一样的呢？发现了，说明你已经懂了，箭头其实就是2个三角形，然后用白色三角形覆盖蓝色三角形，并且错开1px，刚刚好就形成了箭头。这就和《最强大脑》层叠消融项目是一样的。

向上箭头

/**css*/
.top{
 position: absolute;
}
.top:before,.top:after{
 position: absolute;
 content: '';
 border-top: 10px transparent dashed;
 border-left: 10px transparent dashed;
 border-right: 10px transparent dashed;
 border-bottom: 10px #fff solid;
}
.top:before{
 border-bottom: 10px #0099CC solid;
}
.top:after{
 top: 1px; /*覆盖并错开1px*/
 border-bottom: 10px #fff solid;
}
/**html*/
<i class="top" ></div>

通过上面两个例子，我想剩余两个方向的箭头，你应该可以搞定了，就是不能，那就会一种就好了，然后通过`transform:rotate(90deg)`，来旋转角度，还是能搞定各个方向的箭头。

公告

喜欢小编的点击关注，了解更多资源！

头函数是普通函数的简写，可以更优雅的定义一个函数，和普通函数相比，有以下几点差异：

1、函数体内的 this 对象，就是定义时所在的作用域中的 this 值，而不是使用时所在的对象。

2、不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

3、不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

4、不可以使用 new 命令，因为：

• 没有自己的 this，无法调用 call，apply。
• 没有 prototype 属性 ，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 __proto__

new 过程大致是这样的：

• 些人确实不喜欢箭头函数，总觉得它让原本就不那么严谨的js变得更加不严谨了，不过ES6中即然加入了它，想必也有它的过人之处，于是我们可以做的就是试着去接纳它，当然，我们也想看看它到底能把函数简化成什么样子。
• 传统函数写法，大家可以参看我的写的文：总结javascript三种函数写法(传统写法)【306】

一、第一种写法，常规写法。

二、第二种写法，匿名写法。

三、根据箭头函数的简写规则，你终于发现函数原来还能这么写。

1. 只有一个参数时，括号可省略，无参数时不能省略。
2. 函数体只有一行return时，大括号和关键字return可省略。