用css写出不同三角形

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

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

阅读全文

0 0