css3 三角形_用CSS3写一个三角形

一、剖析原理

1.如下图所示，空白区域为 content 内容区，四周为 border 边框。

css代码：

width

2.当 content 逐渐缩小至 0px 时，就会出现想要的三角形。

css代码：

width

---

二、小试牛刀
1.首先，我们依次创建上、下、左、右四个 div 盒子。

<

---

2.添加css样式。

2.1 上三角形

.

---

2.2 下三角形

.

---

2.3 左三角形

.

---

2.4 右三角形

.