每次寫部落格之前的隨言碎語： emm，利用css來進行繪製一些圖形。是無意中發現的一個小操作~然後就研究啦一下啦，然後現在把畫的圖貼上來，下次再更新一些，因為又發現了一些。hahhaha：）

一、 利用css畫圖主要思想

真正用來畫圖的屬性不多，主要是border的一些屬性，偽元素盒子的使用以及定位的使用。最最最最主要的是思想！！！！也就是怎麼去畫！！怎麼去量化一個圖片，只要化簡好圖片之後，一切都好說啦，接下去畫一個圖之前都簡單記錄一下思路~

二 、畫圖開始

1. border屬性的引入
   先從最簡單的屬性開始吧~
   （1）在不設定width以及height的情況下，利用border來繪製一個正方形，這裡是因為border也是具有寬度的，寬高的數值分別是由左右與上下來控制的。具體程式碼如下：（只是用了一個簡單的div盒子來進行繪製）
   寬=border-left+border+right；高=border-top+border+bottom；

      .box {
            width: 0;
            height: 0;
            border:100px solid #339933;
            }

程式碼結果：

2. 簡單三角形
   先將四條邊的
   顏色設定為不相同的，就知道三角形怎麼畫~
   具體程式碼如下：

 .box{
            width: 0;
            height: 0;
            border-width:100px;
            border-style:solid;
            border-color:#ffcccc black #996699 #339933;
        }
 

程式碼結果：

看到這個是不是就會畫三角形勒，只要把其餘不想存在的顏色，設定為transparent屬性就可以啦

（3）倒三角形
可以根據（2）的方法來畫，也可以使用transform屬性來旋轉角度。程式碼與上相似，就不貼啦，貼圖就好啦~

（4）圓弧繪製
圓弧的繪製與三角形的繪製十分相似，只需要使用border-radius就可以了。因為就是弧度啊~
具體程式碼：

  .radiu {
            width: 0;
            height: 0;
            border-left:50px solid transparent;
            border-right:50px solid transparent;
            border-top:50px solid red;
            border-radius:50%;
        }
 

程式碼結果：

（5）梯形繪製
梯形的繪製，主要是知道，邊框與邊框之間的結合處是一個角平分線，也就是會形成一個三角形。就可以理解啦。也就是把左右兩邊的顏色設定為透明度，然後由寬度撐開，如果沒有寬度，就是一個三角形的形狀。
具體程式碼：

 .ti{
            width: 50px;
            /* 有寬度就撐開 否則就兩條邊相連 */
            height: 0;
            /* div是塊級元素 否則預設螢幕寬度 */
            border-right:50px solid transparent;
            border-left:50px solid transparent;
            /* 兩線交接處是一個角平分線 也就是三角形 */
            border-bottom:50px solid red;
        }

程式碼結果：

（6）五邊形：
五邊形，其實就是一個梯形與三角形的拼接，並且利用到偽元素，這樣就不需要額外新增盒子了。便於理解，於是用了兩個隨便的顏色。
具體程式碼：

  .up {
                position:relative;
                width: 100px;
                /*height: 10px;*/
                border-left:50px solid transparent;
                border-right:50px solid transparent;
                border-bottom:110px solid #996699;
                margin:100px auto;
                transform: rotate(180deg);
            }
            .up::before{
                content:'';
                position:absolute;
                top:110px;
                left:-50px;
                /*width:100px;*/
                /*height:100px;*/
                border-left:100px solid transparent;
                border-right:100px solid transparent;
                border-bottom:100px solid transparent;
                border-top:60px solid pink;
                /*background-color: pink;*/
                /*可以簡寫
                 border-color:one two three four ;  與順時針一樣的四個值 對應位置 三個引數也一樣
                 */

            }

程式碼結果：

（7）箭頭的繪製
箭頭的繪製，就是利用兩個偽元素after和before，兩個進行疊加顯示。相互錯開一個單位。
具體程式碼：

.left{
           position:absolute;
           top:50px;
        }
        .left::before,.left::after{
            /* 注意留下的是哪個邊框 然後進行定位移動 */
            position:absolute;
            content:'';
            border-top:10px transparent dashed;
            border-left:10px transparent dashed;
            border-bottom:10px transparent dashed;
            border-right:10px #fff dashed;
        }
        .left::before{
            border-right:10px #0099cc solid ;
        }
        .left::after{
            border-right:10px #fff solid;
            /* 移動覆蓋 */
            left:1px;
        }

程式碼結果：

emmm，還有二，來不及，明天更~