這些圖形的繪制用到了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; }呈現:
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
