最近三角形挺火，很多地方都能碰到，如网页，微信，或者QQ空间的时间轴等地方都能看到，而且这些并不是图片插入进去的，那就需要用CSS来做了，于是就学习了下，现在将学习的代码贴出来，供大家一起学习工具/原料more网页代码编辑器，如Dreamweaver、IntelliJ IDEA等方法/步骤1/7分步阅读

新建一个html5网页，名称为index.html，在body代码中写上四个div，分别是向上、向下、向左，向右四个三角形，代码如下：

div class=triangle-up !--向上的三角--/div

div class=triangle-down !--向下的三角-- /div

div class=triangle-left !--向左的三角--/div

div class=triangle-right !--向右的三角--/div

2/7

然后新建一个css文件style.css，并在index.html中引入，引入代码：link rel=stylesheet type=text/css href=style.css

3/7

先做向上的三角形，这里有两种写法，大家可以参考下。在css文件中输入以下代码：

第一种：.triangle-up {

width:0;

height:0;

border-left:30px solid transparent;

border-right:30px solid transparent;

border-bottom:30px solid #fff;

}

第二种：.triangle-up {

width:0;

height:0;

border:30px solid transparent;

border-bottom-color:#fff;

}

4/7

接下来写向下的三角形，继续在css文件中输入以下代码：

.triangle-down {

width:0;

height:0;

border-left:20px solid transparent;

border-right:20px solid transparent;

border-top:20px solid #0066cc;

}

5/7

然后是向左的三角形，代码为：

.triangle-left {

width:0;

height:0;

border-top:30px solid transparent;

border-bottom:30px solid transparent;

border-right:30px solid yellow;

}

6/7

最后是向右的三角形，代码为：

.triangle-right {

width:0;

height:0;

border-top:50px solid transparent;

border-bottom: 50px solid transparent;

border-left: 50px solid green;

}

7/7

最后保存两个文件，将index.html用浏览器打开看看吧！效果如下

注意事项

因为经验中第一个三角形设置为白色的，所以最好设置下index.html的背景色，这里为灰色，CSS代码为body{background:#333;}

CSS3绘制三角形