实用CSS样式集（三）

为了项目轻量化，一般能用css样式写出来的就不用图片，下面是用css3写常用的三角形

1、上三角

.arrow{
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 80px solid #000;
}

2、下三角

.arrow{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 80px solid #000;
}

3、左三角

.arrow{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 80px solid #000;
    border-bottom: 50px solid transparent;
}

4、右三角

.arrow{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 80px solid #000;
    border-bottom: 50px solid transparent;
}

5、左上三角

.arrow{
    width: 0;
    height: 0;
    border-top: 80px solid #000;
    border-right: 80px solid transparent;
}

6、右上三角

.arrow{
    width: 0;
    height: 0;
    border-top: 80px solid #000;
    border-left: 80px solid transparent;
}

7、左下三角

.arrow{
    width: 0;
    height: 0;
    border-bottom: 80px solid #000;
    border-right: 80px solid transparent;
}

8、右下三角

.arrow{
    width: 0;
    height: 0;
    border-bottom: 80px solid #000;
    border-left: 80px solid transparent;
}

其他实用CSS样式

实用CSS样式集（一）-CSDN博客

实用CSS样式集（二）-CSDN博客