css3三角形样式

网页上的三角形、长方形、圆形，正方形都是用代码实现的，今天小郭给大家分享用CSS3如何做三角形。

CSS3三角形实现原理

在css3中，使用transparent的属性，也就是透明的，比如文字颜色设为黑色可以这样写color：black，如果想把字体的颜色设置为透明，就可以写color：transparent。同样的背景也可以设为透明，那就可以这样写：background-color：transparent。

8种三角形实现代码如下：

1.triangle up 上三角形

#triangle-up{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid black;
}

2.triangle down 下三角形

#triangle-down{
width：0；
height：0；
border-left：50px solid transparent；
border-right:50px solid transparent;
border-top:100px solid black;
}

3.triangle left 左三角形

#triangle-left{
width：0；
height：0；
border-top：50px solid transparent；
border-bottom:50px solid transparent;
border-right:100px solid black;
}

4.triangle right 右三角形

#triangle-right{
width：0；
height：0；
border-top：50px solid transparent；
border-bottom:50px solid transparent;
border-left:100px solid black;
}

5.triangle top left 左上三角形

#triangle-topleft{
width：0；
height：0；
border-top：100px solid black；
border-right:100px solid transparent;
}

6.triangle top right 右上三角形

#triangle-topright{
width：0；
height：0；
border-top：100px solid black；
border-left：100px solid transparent；
}

7.triangle bottom left 左下三角形

#triangle-bottomleft{
width：0；
height：0；
border-bottom：100px solid black；
border-right：100px solid transparent；
}

8.triangle bottom right 右下三角形

#triangle-bottomright{
width：0；
height：0；
border-bottom：100px solid black；
border-left：100px solid transparent；
}

大概的效果如图：