div+css3繪制基本圖形

基本圖形包括：矩形、圓角矩形、圓形、橢圓形、三角形、值線、弧

這些圖形的繪制用到了CSS圓角屬性，不考慮IE8。

下面的實現在chrome瀏覽器運行通過。

 

1.矩形

比較簡單，通過CSS設置寬度、高度、背景色即可。

html:

<div class="rectangle"></div>

css:

        .rectangle {
            width: 150px;
            height: 100px;
            background-color: orangered;
        }

呈現：

 

2.圓角矩形

在矩形設置的基礎上，增加圓角屬性設定，這里用的單位是百分比,好處是可適應整體大小的變化而變化。

html:

<div class='rounded-rectangle'></div>

css:

        .rounded-rectangle {
            width: 150px;
            height: 100px;
            background-color: orangered;
            border-radius: 10%;
        }

呈現:

 

3.圓

設置為正方形，將圓角設成50%即可，其實就是圓角的半徑為正方形的的半徑。

html:

<div class='circle'></div>

css:

        .circle {
            width: 100px;
            height: 100px;
            background-color: orangered;
            border-radius: 50%;
        }

呈現:

 

4.橢圓

在圓形的基礎上，將正方形設置成矩形即可。

html:

<div class='ellipse'></div>

css:

        .ellipse {
            width: 150px;
            height: 100px;
            background-color: orangered;
            border-radius: 50%;
        }

呈現: 

 

5.三角形

乍一看三角形這個樣子，還真是無從下手，沒有什么現成的方法一步到位的完成，繪制它需要用到border的特性，這個很有意思。

html:

<div class='triangle'></div>

分解1：

現在我們來看一下有趣的border，做一個正方形，寬高都設成100px，設定四個邊的border的寬度為10px，每條邊設置不同的顏色。

        .triangle{
            width: 100px;
            height: 100px;
            border-style: solid;
            background-color: orangered;
            border-top-color: red;
            border-right-color: green;
            border-bottom-color: blue;
            border-left-color:blueviolet;
            border-top-width: 10px;
            border-bottom-width: 10px;
            border-left-width: 10px;
            border-right-width: 10px;
        }

呈現后發現很有意思，兩條border邊的交界處是斜角邊，

分解2：

繼續，將各條邊的寬度放大，將正方形寬高都設成0px，將每條邊的border的寬度都設成50px（原正方形寬度或高度的一半）

        .triangle{
            width: 0px;
            height: 0px;
            border-style: solid;
            background-color: orangered;
            border-top-color: red;
            border-right-color: green;
            border-bottom-color: blue;
            border-left-color:blueviolet;
            border-top-width: 50px;
            border-bottom-width: 50px;
            border-left-width: 50px;
            border-right-width: 50px;
        }

是不是各個邊都露出三角形了，要的形狀就出來了，這就是有趣的border。

　　

分解3：

最后一步就簡單了，把不需要的邊都透明掉，只留下底邊，並且透明掉背景。

        .triangle{
            width: 0px;
            height: 0px;
            border-style: solid;
            background-color: transparent;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: blue;
            border-left-color:transparent;
            border-top-width: 50px;
            border-bottom-width: 50px;
            border-left-width: 50px;
            border-right-width: 50px;
        }

透明掉各邊和背景后，需要的三角形就出來了，很有趣。

如果要使他變成鈍角，就把底邊的寬度變小，如果是銳角，就增加寬度。

如果是直角，就把左或右border的寬度設成0px。

各種三角形可通過各邊的寬度值的調整來實現。 

 

6.直線

直線就比較簡單，壓縮高度或寬度就變成了直線。

html:

<div class='line'></div>

css:

        .line{
            width: 100px;
            height: 3px;
            background-color: orangered;
        }

呈現: 

 

7.弧

本質上是利用圓角來實現，現在需要把矩形的左上角的圓角繪制成弧形，那么把右邊和底邊border的寬度設成0px，讓他們不可見，設置左上角圓角的半徑，讓其變大，看得明顯些，其余的圓角半徑全都設成0px，這樣一個弧形就完成了。

html:

<div class='arc'></div>

css:

        .arc {
            width: 100px;
            height: 100px;
            border-style: solid;
            border-top-width: 10px;
            border-bottom-width: 0px;
            border-left-width: 10px;
            border-right-width: 0px;
            border-top-color: blue;
            border-bottom-color: red;
            border-left-color: red;
            border-right-color: red;
            background-color: transparent;
            border-top-right-radius: 0px;
            border-top-left-radius: 100px;
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 0px;
        }

呈現: