## 1 基本原理

#### 核心代码：

``````.box {
width: 50px;
height: 50px;
border-top: 50px solid red;
border-left:50px solid blue;
border-right: 50px solid green;
border-bottom: 50px solid yellow;
}``````

## 2 绘制三角形

### 2.1 等边三角形

#### 2.1.1 尖角向上：

``````.triangle-up {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 57.735px solid transparent;
border-right: 57.735px solid transparent;
}``````

#### 2.1.2 尖角向下：

``````.triangle-down {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 57.735px solid transparent;
border-right: 57.735px solid transparent;
}``````

#### 2.1.3 尖角向左：

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

#### 2.1.4 尖角向右：

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

### 2.2 等腰直角三角形

#### 2.2.1 左上直角：

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

#### 2.2.2 右上直角：

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

#### 2.2.3 左下直角：

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

#### 2.2.4 右下直角：

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