css小三角形

发表于 | Edited on | 分类于 | Comments： | Views：
如题，用css来绘制小三角形，最近又有用到，觉得使用率还是挺高，有必要做个记录，方便他人理解。

【原理】

其实就是为一个点设边框，通过调整边框的颜色、是否存在勾勒出三角的形状，下面会有实例。

上三角


1
2
3
4
5
6
7
.triangle_up{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid #000000;       //50px 控制三角指向长短
}

倒三角


1
2
3
4
5
6
7
.triangle_down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid #000000;         //50px 控制三角指向长短
}

左三角


1
2
3
4
5
6
7
.triangle_left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 50px solid #000000;       //50px 控制三角指向长短
    border-bottom: 50px solid transparent;
}

右三角


1
2
3
4
5
6
7
.triangle_right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 50px solid #000000;        //50px 控制三角指向长短
    border-bottom: 50px solid transparent;
}

左上角


1
2
3
4
5
6
.triangle_top_left {
    width: 0;
    height: 0;
    border-top: 100px solid #000000;            //100px 控制向下延伸长
    border-right: 100px solid transparent;      //100px 控制向右延伸长
}

右上角


1
2
3
4
5
6
.triangle_top_right {
    width: 0;
    height: 0;
    border-top: 100px solid #000000;
    border-left: 100px solid transparent; 
}

左下角


1
2
3
4
5
6
.triangle_bottom_left {
    width: 0;
    height: 0;
    border-bottom: 100px solid #000000;
    border-right: 100px solid transparent;
}

右下角


1
2
3
4
5
6
.triangle_bottom_right {
    width: 0;
    height: 0;
    border-bottom: 100px solid #000000;
    border-left: 100px solid transparent;
}