用純CSS制作各種圖形也不是很復(fù)雜，只要多用心思學(xué)習(xí)和思考，現(xiàn)在和石家莊網(wǎng)站建設(shè)老師一起了解一下吧!

　　正方形(square)

　　#square {

　　width: 100px;

　　height: 100px;

　　background: red;

　　}

　　矩形(rectangle)

　　#rectangle {

　　width: 200px;

　　height: 100px;

　　background: red;

　　}

　　圓形(circle)

　　#circle {

　　width: 100px;

　　height: 100px;

　　background: red;

　　-moz-border-radius: 50px;

　　-webkit-border-radius: 50px;

　　border-radius: 50px;

　　}

　　/* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */

　　橢圓形(oval)

　　#oval {

　　width: 200px;

　　height: 100px;

　　background: red;

　　-moz-border-radius: 100px / 50px;

　　-webkit-border-radius: 100px / 50px;

　　border-radius: 100px / 50px;

　　}

　　/* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */

　　向上的三角形(triangle up)

　　#triangle-up {

　　width: 0;

　　height: 0;

　　border-left: 50px solid transparent;

　　border-right: 50px solid transparent;

　　border-bottom: 100px solid red;

　　}

　　梯形(Trapezoid)

　　#trapezoid {

　　border-bottom: 100px solid red;

　　border-left: 50px solid transparent;

　　border-right: 50px solid transparent;

　　height: 0;

　　width: 100px;

　　}

　　平行四邊形(Parallelogram)

　　#parallelogram {

　　width: 150px;

　　height: 100px;

　　-webkit-transform: skew(20deg);

　　-moz-transform: skew(20deg);

　　-o-transform: skew(20deg);

　　background: red;

　　}

　　菱形(Diamond Square)

　　#diamond {

　　width: 0;

　　height: 0;

　　border: 50px solid transparent;

　　border-bottom-color: red;

　　position: relative;

　　top: -50px;

　　}

　　#diamond:after {

　　content: '';

　　position: absolute;

　　left: -50px;

　　top: 50px;

　　width: 0;

　　height: 0;

　　border: 50px solid transparent;

　　border-top-color: red;

　　}

　　雞蛋(Egg)

　　#egg {

　　display:block;

　　width: 126px;

　　height: 180px;

　　background-color: red;

　　-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;

　　border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

　　}

　　以上就是石家莊網(wǎng)站建設(shè)老師分享的幾種圖形編碼，純CSS編寫的圖形還有很多，需要用心去思考和學(xué)習(xí)，想要做網(wǎng)站建設(shè)或者小程序開發(fā)的，歡迎來尚武科技進(jìn)行咨詢了解!