这篇文章主要介绍了CSS怎么绘制图形的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS怎么绘制图形文章都会有所收获，下面我们一起来看看吧。

正方形/长方形

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>w3cschool-亿速云，随时随地学编程</title><style>.Square{width:200px;height:200px;background-color:red;}.Rectangle{width:400px;height:200px;background-color:black;margin-top:10px;}</style></head><body><divclass="Square"></div><divclass="Rectangle"></div></body></html>三角形

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>w3cschool-亿速云，随时随地学编程</title><style>/*向下的三角形，则需要设置为border-top：100pxsolidred;左右边不变向左的三角形，则需要设置为border-right：100pxsolired;上下边不变向右的三角形，则需要设置为border-left：100pxsolired;上下边不变*/.triangle-up{width:0;height:0;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;border-bottom:100pxsolidred;}</style></head><body><divclass="triangle-up"></div></body></html>椭圆形/圆形

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>w3cschool-亿速云，随时随地学编程</title><style>.oval{/*椭圆*/width:200px;height:100px;background:red;-moz-border-radius:100px/50px;-webkit-border-radius:100px/50px;border-radius:100px/50px;}.circle{/*圆形*/width:100px;height:100px;background:red;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}</style></head><body><divclass="oval"></div><divclass="circle"></div></body></html>平行四边形

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>w3cschool-亿速云，随时随地学编程</title><style>.parallelogram{/*平行四边形*/width:150px;height:100px;-webkit-transform:skew(20deg);-moz-transform:skew(20deg);-o-transform:skew(20deg);background:red;margin-left:30px;}</style></head><body><divclass="parallelogram"></div></body></html>梯形

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>w3cschool-亿速云，随时随地学编程</title><style>.trapezoid{/*梯形*/border-bottom:100pxsolidred;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;height:0;width:100px;}</style></head><body><divclass="trapezoid"></div></body></html>

关于“CSS怎么绘制图形”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“CSS怎么绘制图形”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。