^{<sub id="nn3ke"></sub>}

點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

div+css3繪制基本圖形-白色的海

來源：懂視網責編：小采時間：2020-11-27 16:44:24

div+css3繪制基本圖形-白色的海

div+css3繪制基本圖形-白色的海:基本圖形包括：矩形、圓角矩形、圓形、橢圓形、三角形、值線、弧這些圖形的繪制用到了CSS圓角屬性，不考慮IE8。下面的實現在chrome瀏覽器運行通過。 1.矩形比較簡單，通過CSS設置寬度、高度、背景色即可。 html: div class=rectangle

推薦度：

點擊下載本文 文檔為doc格式

導讀div+css3繪制基本圖形-白色的海:基本圖形包括：矩形、圓角矩形、圓形、橢圓形、三角形、值線、弧這些圖形的繪制用到了CSS圓角屬性，不考慮IE8。下面的實現在chrome瀏覽器運行通過。 1.矩形比較簡單，通過CSS設置寬度、高度、背景色即可。 html: div class=rectangle

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

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

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

1.矩形

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

html:

css:

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

呈現：

2.圓角矩形

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

html:

css:

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

呈現:

3.圓

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

html:

css:

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

呈現:

4.橢圓

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

html:

css:

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

呈現:

5.三角形

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

html:

分解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:

css:

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

呈現:

7.弧

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

html:

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;
 }

呈現: