用CSS3写一个三角形

一、剖析原理

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;

---

二、小试牛刀

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