csS绘制三角形

来源：互联网发布：淘宝网注册账号申请编辑：程序博客网时间：2024/05/18 08:13

CSS 三角形绘制方法

代码如下：

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

代码如下:

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

代码如下:

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

代码如下:

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

代码如下:

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

代码如下:

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

代码如下:

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

代码如下:

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

0 0