1.利用邊框制作正方形

如果將盒容器的width和height設(shè)置為0，并為每條邊設(shè)置一個(gè)較粗的width值和彼此不同的顏色，最終會(huì)得到四個(gè)被拼接在一起三角形，它們分別指向不同的顏色。

html代碼：<div id="square">11</div>

css3代碼：

　　　　#square{
　　　　　　　　width:0;
　　　　　　　　height:0;
　　　　　　　　border-width:100px;
　　　　　　　　border-style:solid;
　　　　　　　　border-color: red blue green yellow;
　　　　　　　　line-height:99em;
　　　　　　　　overflow:hidden;
　　　　　　　　cursor:pointer;
　　　　　　　　margin: 30px auto;
　　　　　　}

顯示效果：

由圖可見，四個(gè)三角形指向不同方向。

2.當(dāng)我們對(duì)四個(gè)三角形的其中三個(gè)設(shè)置顏色為透明即transparent，即可得到一個(gè)三角形

html：

<div id="triangle">11</div>

css：

#triangle{
　　width:0;
　　height:0;
　　border-width:100px;
　　border-style:solid;
　　border-color:red transparent transparent transparent;
　　line-height:99em;
　　overflow:hidden;
　　cursor:pointer;
　　margin: 30px auto;
}

效果：

3.大家應(yīng)該知道css3中引入了圓角屬性（border-radius），一旦設(shè)置這個(gè)值，邊框即會(huì)出現(xiàn)圓角。同樣，我們對(duì)正方形設(shè)置圓角，即可得到餅狀圖

html：<div id="circle">11</div>

css：

#circle{

width:0;
height:0;
border-radius:100px;
border-width:100px;
border-style:solid;
border-color: red blue green yellow;
line-height:99em;
overflow:hidden;
cursor:pointer;
margin: 30px auto;

}

效果：

4.同樣我們對(duì)其中三個(gè)邊框設(shè)置透明色即可得到扇形

html：<div id="fan">11</div>

css:

#fan{

width:0;
height:0;
border-radius:100px;
border-width:100px;
border-style:solid;
border-color:red transparent transparent transparent;
line-height:99em;
overflow:hidden;
cursor:pointer;
margin: 30px auto;

}

效果：

轉(zhuǎn)載于:https://www.cnblogs.com/qduanlu/archive/2012/12/27/2835245.html

總結(jié)

以上是生活随笔為你收集整理的使用css3制作正方形、三角形、扇形和饼状图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。