纯CSS代码实现小三角效果

  • 实现方法：

    <div class="triangle"></div>
    .triangle-all{
  width: 0;
  height: 0;
  border-width: 30px;
  border-style: solid;
  border-color: #c03 #fc0 #69c #6c6;/* 红 黄 蓝 绿 */
}

  • 效 果 图

  • 实现原理
    • 利用元素的四个border会彼此叠加的性质来制作三角形，只要让其他三条边隐藏起来就可达到效果。

通过上面的原理，我们来制作一个指向下的三角形：

  • 实现方法：

    <div class="triangle-all"></div>
    .triangle_down{
  width:0;
  height:0;
  border-width:30px 30px 0;
  border-style:solid;
  border-color:#c03 transparent transparent ;/* 红 透明 透明 */
}

  • 效 果 图

  • 原理分析
    • border-color:#c03 transparent transparent ;是将需要隐藏的边的颜色设置成透明；
    • border-width:30px 30px 0; 是将三角形对边的宽度设置为0(这里对边是border-bottom)这么做的原因是减小三角形有效作用区域。

通过上面的原理，我们来制作类似下面的tip效果：

  • 实现方法

    <div class="triangle-tip-up"></div>
    .triangle-tip-up{
  width: 200px;
  height: 30px;
  background:#3FB58E;
  border-radius: 4px;
  position: relative;
}
.triangle-tip-up:before{
  content:'';
  width: 0;
  height: 0;
  border-width: 0 10px 10px;
  border-style: solid;
  border-color: transparent transparent #3FB58E;
  position: absolute;
  left: 80px;
  top: -10px;
}

  • 实现原理

    • 利用一个div来做tip的主体框，设置其position为relative(为了控制三角形的位置)
    • 利用css的:before属性来做三角形的主体元素，设置其position为absolute(这样可以通过设置left和top的值来随意控制小三角的位置)

实现类似下面的不规则三角形

  • 实现方法

    <div class="triangle-scalene"></div>
    .triangle-scalene{
  width: 0;
  height: 0;
  border-width: 0 0 60px 20px;/* 设置对角和相邻的border都为0来实现不规则效果 */
  border-style: solid;
  border-color: transparent transparent #69c;
}

  • 实现原理

    • 设置对角和相邻一边的border都为0,然后通过改变其余两边border的宽度来实现不规则效果

推荐三个在线前端代码编辑器

  • 前端开发者的利器：
  • 主要功能
    • 提供四个窗口：HTML、CSS、JS、Result
    • 代码可以实时编译，立即看到运行效果
    • 可以很方便的引入一些很流行的第三方库，比如：jQuery、Angular等等。
    • 写完代码之后可以很方便地生成可以嵌套在网页中的代码，直接复制生成的代码放进网页中就可以看到效果。
      • 此功能在写博文的时候非常实用，再也不用担心没法看到运行效果了。

使用前需要先注册，不过这三个网站都支持用github账号直接登录，省去了繁琐的注册流程。

Grunt介绍

  • Grunt是什么？

    • 官方解释：JavaScript 任务运行器
    • Grunt是nodeJS的一个插件。

  • Grunt能干什么?

    • Grunt可以让你解放双手，做一些自动化的任务处理来简化你的工作。

  • 那Grunt到底能干什么？

  • 具体使用：

bower - 前端包管理器

许多程序语言都有自己标准的包管理器，开发者可以用其来安装所有的库文件。比如:Ruby有gem, Python有pip,Server端的javascript有npm来管理。但是客户端的javascript有没有相应的包管理器啊?有，那就是bower.

  • 什么是Bower？

    • 首先，Bower是node的一个插件。
    • Bower是一个前端资源包管理器，用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

  • 用Bower为给前端开发带来什么好处？

    • 节省时间; 解放繁琐的人力劳动
      • 比如通常情况下如果你的项目要用到jQuery，你需要到jQuery的官网去找到你想要的版本下载下来，然后再拷贝到你项目中相应的目录中，这样很繁琐；但是如果用Bower,你只需要输入一个命令，jquery就会安装在本地计算机上指定的目录中，你不需要去记版本号之类的东西，你也可以通过Bower的info命令去查看任意库的信息。
    • 不用担心各种库之间的依赖关系
      • 比如你项目中会用到了bootstrap, jquery, jquery.ui. 这三个库都用到了jquery，所以你必须要去找到一个合适的jquery版本来让bootstrap和jquery.ui都可以正常工作。如果用Bower,你根本不用去管这些库的依赖关系，只需要执行一个命令来就可以了，Bower会自动帮你解决依赖关系，找到合适版本库。只需要执行下面三个命令即可：
        • bower install jquery
        • bower install bootstrap
        • bower install bootstrap
    • 可以很容易的了解到项目中用到的所有第三方库以及它们的版本信息
      • 你可以创建一个名为bower.json的文件，在这个文件里你可以指定所有库的依赖关系，任何时候你需要弄清楚你正在使用哪些库，你可以参考这个文件。如下可以在安装库的时候把库的信息添加到bower.json的文件中：
        • bower install jquery --save
    • 节省版本控制服务器的空间
      • 不去需要把第三库文件提交到版本库中，只需要提交bower.json文件即可。开发人员从版本库中下载下来项目之后只需要执行bower install就会自动安装第三库到本地。
    • 让升级变得简单
      • 假设某个库的新版本发布了一个重要的安全修补程序，为了安装新版本，你只需要运行一个命令，bower会自动更新所有有关新版本的依赖关系。

bower具体使用

具体使用请参考下面这个链接，写的很详细：
http://segmentfault.com/a/1190000000349555

bower官网地址：
http://bower.io/