用css3做三角形,CSS3常见技巧（二）：如何用CSS3来实现三角形？

如何使用CSS3来画一个三角形经常令人非常感到困惑，其实原理上是宽度相等的边距以45度来连接。

首先看第一个图

这个是正常情况下，如果我们这个时候把顶部的边距设为none的话就会显示下面这种情况

再把content宽度设为0

再把content高度设为0

这个时候，很容易联想到把左右边距颜色设为透明色(transparent)

大致过程就是如此，总结一下就是如果我想到一个三角形，比如它的方向就是向左的，那么只要设置它相反放下的颜色不为透明，并把其他两个方向设为透明即可。

代码如下：

.right{

width:0;

height:0;

border-top:20px solid transparent;

border-bottom: 20px solid transparent;

border-left: 20px solid pink;

}

.top{

width: 0;

height: 0;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

border-bottom: 20px solid pink;

}

.left{

width: 0;

height:0;

border-right: 20px solid pink;

border-top: 20px solid transparent;

border-bottom: 20px solid transparent

}

.bottom{

width: 0;

height: 0;

border-top: 20px solid pink;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

}

实现效果如图