用CSS3寫一個三角形

1、剖析原理

1.以下圖所示，空白區域爲 content 內容區，四周爲 border 邊框。

css代碼：

width: 100px;
height: 100px;
border-top:50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid blue;
border-left: 50px solid yellow;
複製代碼

---

2.當 content 逐漸縮小至 0px 時，就會出現想要的三角形。

css代碼：

width: 0px;
height: 0px;
border-top:50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid blue;
border-left: 50px solid yellow;
複製代碼

---

2、小試牛刀

1.首先，咱們依次建立上、下、左、右四個 div 盒子。

<div class="up"></div>
    <div class="down"></div>
    <div class="left"></div>
    <div class="right"></div>
複製代碼

---

2.添加css樣式。

1. 上三角形

.up {
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}
複製代碼

---

2. 下三角形

.down {
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: red transparent transparent transparent;
}
複製代碼

---

3. 左三角形

.down {
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: transparent red transparent transparent;
}
複製代碼

---

4. 右三角形

.down {
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: transparent transparent transparent red;
}
複製代碼