css实现三角形原来这么简单啊，可以跟三角形图片说拜拜了

在开发网页时经常需要用到三角形做指示效果。

【三角形指示效果】

一般我们会让美工提供好三角形的图片然后用在网页中，这种方式用起来简单，但会增加网页的大小，同时要修改三角形大小、颜色等还需要再去麻烦美工要图。

这里给大家介绍使用css代码就可以实现各种各样的三角形的方法，从此你想要什么样的三角形它就有什么样的三角形。

【CSS实现三角形】

1. 先看下css来实现个矩形

html代码

<div id = "rect"></div>

css代码

#rect {
    width:0;
    height:0;
    border:100px solid red;
}

这里要注意的是我们是将该div的宽（width）和高（height）都设为0，然后是通过border去实现这个矩形的。

【生成的矩形分析】

这里需要注意下的是生成的矩形的宽高是200X200，因为border:100px solid red这句css相当于:

border-top:100px solid red;
border-bottom:100px solid red;
border-left:100px solid red;
border-right:100px solid red;

这样分解一下就好理解了，可以利用分解后（border-top、border-bottom、border-left、border-right）这些属性，配合上边框的透明属性（transparent）去实现各种各样的三角形。

2. 彩色矩形

html代码

<div id = "rect-colorful"></div>

css代码

#rect-colorful {
    width: 0;
    height: 0;
    border-left:100px solid red;
    border-right: 100px solid blue;
    border-top:100px solid yellow;
    border-bottom:100px solid black;

}

【彩色矩形】

配合着上面的分析，这个彩色矩形很好理解的。

3. 下三角形

要实现下三角形，可以将border-bottom这个底边框不设置，然后将border-left和border-right的颜色设为透明色（transparent）,就可以实现了。

html代码

<div id = "triangle-down"></div>

css代码

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

【下三角形】

下三角形的高度是由border-top这个属性决定的，这个三角形的宽度是由border-left和border-right的和所决定的，颜色是由border-top决定的。

【下三角形解析图】

4. 上三角形

html代码

<div id = "triangle-up"></div>

css代码

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

【上三角形】

上三角形的高度是由border-bottom这个属性决定的，这个三角形的宽度是由border-left和border-right的和所决定的，颜色是由border-bottom决定的。

5. 右三角形

html代码

<div id = "triangle-right"></div>

css代码

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

【右三角形】

右三角形的高度由border-top和border-bottom的和所决定的，宽度是由border-left这个属性决定的，颜色是由border-left决定的。

6. 左三角形

html代码

<div id = "triangle-left"></div>

css代码

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

【左三角形】

左三角形的高度由border-top和border-bottom的和所决定的，宽度是由border-right这个属性决定的，颜色是由border-right决定的。

掌握了原理之后大家可以轻松去实现各种各样的三角形的，设置不同的三角形的宽高、颜色。

 

本文为远怀学堂原创，收藏、转发吧，总会用到的。

这里讲的是实心小三角的方法，想看三角小箭头怎么用css去实现的，可以关注我们「远怀学堂」，后续会有相关教程发布哦，我们专注于「原创精品」教程。