使用CSS画三角形（border）

用CSS画三角形，利用border属性，把一个边设置成看到的样式，其他两边或三边用transparent方法变成透明。

一、案例

1. 上三角

HTML代码：

<div></div>

CSS代码：

div {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 70px solid red;
}

2. 下三角

HTML代码：

<div></div>

CSS代码：

div {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 70px solid red;
}

3. 左三角

HTML代码：

<div></div>

CSS代码：

div {
    width: 0;
    height: 0;  
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 70px solid red;
}

4. 右三角

HTML代码：

<div></div>

CSS代码：

div {
    width: 0;
    height: 0;  
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 70px solid red;
}

5. 左上顶角

HTML代码：

<div></div>

CSS代码：

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

6. 右上顶角

HTML代码：

<div></div>

CSS代码：

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

5. 右下顶角

HTML代码：

<div></div>

CSS代码：

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

5. 左下顶角

HTML代码：

<div></div>

CSS代码：

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

二、原理

首先定义一个div，且div的边框足够厚。

HTML代码：

<div></div>

CSS代码：

div {
    width: 100px;
    height: 100px;
    background: #15A892;
    border-top: 20px solid #1574A8;
    border-right: 20px solid #E94E65;
    border-bottom: 20px solid #E9D24E;
    border-left: 20px solid #A81574;
}

div的宽和高各位100px，边框为20px，且四边的颜色都不一样。

可以看得出，四边的接合出和四边形成了一个45°，分别看每一条边都是一个梯形。

这时如果把四条边都继续加粗，变成50px。

这时看分别看四条边所形成的梯形，我们设置边框越粗，梯形的上底就越小。

如果我们把div的大小设成0，只有边框的话。如下图所示：

可以看出是有4个等腰三角形组成一个正方形。

这时如果把其他三个边都变成透明（使用transparent），同时把div的背景色去掉，最终就只会看到一个三角形。

需要注意的是，如果要做一个上图这种朝向的三角形（设置底边的颜色），对边可以不设置，但相邻两边一定要设置厚度和实线（solid），同时相邻两边要设置成透明色（transparent）。