利用border属性来画一些图形

原理介绍：

当我们使用以下样式时，会出现如下图形，我们通过其中的任意一条或多条样式来实现画出基本图形的目的。

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>demo</title>
 6     <style type="text/css">
 7         .demo {
 8             width: 30px;
 9             height: 30px;
10             border-top: 30px solid red;
11             border-left: 30px solid green;
12             border-right: 30px solid blue; 
13             border-bottom: 30px solid coral;     
14         }
15     </style>   
16 </head>
17 <body>
18     <div class="demo"></div>
19 </body>
20 </html>

Chrome浏览器输出：

1、将width,height设置为0。

.demo {

　　height: 0;

　　border-top: 30px solid red;

　　border-left: 30px solid green;

　　border-right: 30px solid blue;

　　border-bottom: 30px solid coral;

}

Chrome浏览器输出：

2、三角形

.demo {
            width: 0;
            height: 0;
            border-top: 30px solid transparent;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent; 
            border-bottom: 30px solid coral;     
}

Chrome浏览器输出：

3、倒三角

.demo {
            width: 0;
            height: 0;
            border-top: 30px solid coral;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent; 
            border-bottom: 30px solid transparent;     
}

Chrome浏览器输出：

4、梯形

　　第一步：

.demo {
            width: 30px;
            height: 0px;
            border-top: 30px solid red;
            border-left: 30px solid green;
            border-right: 30px solid blue; 
            border-bottom: 30px solid coral;     
}

Chrome浏览器输出：

最终：

.demo {
            width: 30px;
            height: 0px;
            border-top: 30px solid transparent;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent; 
            border-bottom: 30px solid coral;     
}

Chrome浏览器输出：

同理，倒梯形：

5、彩条

　　第一步：

.demo {
            width: 0px;
            height: 30px;
            border-top: 30px solid red;
            border-left: 30px solid green;
            border-right: 30px solid blue; 
            border-bottom: 30px solid coral;     
}

Chrome浏览器输出：

第二步：

.demo {
            width: 0px;
            height: 30px;
            border-top: 30px solid red;
            border-left: 30px solid red;
            border-right: 30px solid red; 
            border-bottom: 30px solid coral;     
}

Chrome浏览器输出：

最终：

.demo {
            width: 0px;
            height: 30px;
            border-top: 30px solid red;
            border-left: 30px solid red;
            border-right: 30px solid red; 
            border-bottom: 30px solid transparent;     
}

Chrome浏览器输出：