用纯CSS制作各种图形也不是很复杂，只要多用心思学习和思考，现在和石家庄网站建设老师一起了解一下吧!

　　正方形(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%;

　　}

　　以上就是石家庄网站建设老师分享的几种图形编码，纯CSS编写的图形还有很多，需要用心去思考和学习，想要做网站建设或者小程序开发的，欢迎来尚武科技进行咨询了解!