概述：用純css畫一些簡單的圖形，如三角形/梯形/其他
實現原理：通過對一個div添加邊框，設置邊框寬度，顏色
一個最簡單的demo
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.shape{
width:0;
height:0;
border:20px solid;
border-color:transparent transparent gray transparent}
</style>
</head>
<body>
<div class="shape">
</div>
</body>
</html>效果圖
盒子模型
解析看到這裏可能還不是很直白，那我們把這個盒子的所有邊框都顯示出來，一目瞭然，修改一下邊框的樣式就行了
<style type="text/css">
.shape{
width:0;
height:0;
border:20px solid;
border-color:blue green gray red}
</style>在看一看這個盒子效果圖
關鍵技術：現在很容易看明白這個三角形是怎麼出生的了，通過設置div的寬高和邊框寬度，硬生生的擠壓出一個三角形，然後把其他三個方位的邊框隱藏掉，三角形就出來了，有沒有一種恍然大悟的感覺？
舉一反三：①如果我想畫一個梯形怎麼做？
<style type="text/css">
.shape{
width:10px;
height:0;
border:20px solid;
border-color:transparent transparent red transparent}
</style>②郵箱形
<style type="text/css">
.shape{
width:10px;
height:0;
border:20px solid;
border-color:green blue red pink}
</style>
結尾：更多純CSS圖形