使用css3在网页中实现各种三角形样式

CSS3三角形实现原理

在css3中，我们主要使用的是一个transparent的属性，意思是透明的，比如我们将字体设置为黑色会写color：black，那么如果想把字体的颜色设置为透明，我们可以写color：transparent。同理background-color：transparent可以设置背景为透明。

三角形8种分类

我们根据三角形的位置分为8种：

triangle up，triangle down，triangle left，triangle right，triangle top left，triangle top right，triangle bottom left和triangle bottom right

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;
}