用css写出不同三角形

来源:互联网 发布:直播app软件源码 编辑:程序博客网 时间:2024/06/16 06:54

1、这里写图片描述

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

2、这里写图片描述

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

3、这里写图片描述

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

4、这里写图片描述

#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 {    width: 0;    height: 0;    border-top: 100px solid black;    border-right: 100px solid transparent;}

6、这里写图片描述

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

7、这里写图片描述

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

8、这里写图片描述

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