纯css制作三角形

1、在通过css弄出三角形前，我们需要了解一下border的我们平常忽视的小秘密。

如果给一个div的css样式上给他四个边分别以不同的颜色渲染，那么它每个边是怎么样的呢？

如果只给一条边予以颜色，那么它的形状是这样的。

代码： html
<div></div>
css
div{
width:100px;
height:100px;
border-top:10px solid red;
}

现在看起来和我们想的结果似乎一样，都是矩形的形状。但是如果把这div周围的边都渲染颜色呢？

代码： html
<div></div>
css
div{
width:100px;
height:100px;
border-top:10px solid red;
border-right:10px solid blue;
}

四条边：

div{
border-top:10px solid red;
border-right:10px solid blue;
border-bottom:10px solid black;
border-left:10px solid pink;
}

效果如图：



是不是和想象中的不一样？现在每条边变成了梯形的形状，平常四条边予以同样的颜色我们看不出，现在就显而易见了。

2、知道这个秘密后，弄三角行形状是不是就简单多了？起码这个梯形就像一个三角形的底角一样。

可以想象一下，可能是因为我们设置了这个div的高度，宽度，所以这个三角形的顶角就给削掉。

然后我们不设置高度宽度。

代码： html
<div></div>
css
div{
width:0px;
height:0px;
border-top:10px solid red;
border-right:10px solid blue;
border-bottom:10px solid black;
border-left:10px solid pink;
}

得到下面这个效果，



3、现在，显而易见，有四个三角形。我们只需要对其余三个我们不需要的三角形的颜色设置为透明即可。这里假设我只需要最上面的红色三角形。

div{

width:0px;

height:0px;

border-top:10px solid red;

border-right:10px solid transparent;

border-bottom:10px solid transparent;

border-left:10px solid transparent;

}

得到效果，



哈哈，三角形就做出来啦~~~