CSS 三角形绘制方法-白红宇

CSS 三角形绘制方法

阅读量：6679 次

发布时间：2019-06-25

本文共 1041 字，大约阅读时间需要 3 分钟。

图片描述

代码如下:

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

转载地址：http://hrgxo.baihongyu.com/

你可能感兴趣的文章