使用纯CSS绘制基本图形（矩形、圆形、三角形、多边形等）

纯CSS画基本图形 CSS是一种强大的样式语言，它可以用来绘制各种基本图形。今天，我们将学习如何使用纯CSS来绘制基本图形，如矩形、圆形、三角形、多边形、爱心、八卦等。 矩形 矩形是最基本的图形之一。使用CSS绘制矩形非常简单，只需要设置width和height属性即可。例如： ``` #square{ width: 100px; height: 100px; background: red; } ``` 长方形 长方形是矩形的一种变形，同样可以使用CSS来绘制。我们可以设置width和height属性来确定长方形的尺寸。例如： ``` #rectangle{ width: 200px; height: 100px; background: red; } ``` 圆形 圆形是另一种基本图形。使用CSS绘制圆形需要使用border-radius属性。例如： ``` #circle{ width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } ``` 椭圆 椭圆是圆形的一种变形。使用CSS绘制椭圆需要使用border-radius属性，并设置椭圆的长轴和短轴。例如： ``` #oval{ width: 200px; height: 100px; background: red; -moz-border-radius: 100px/50px; -webkit-border-radius: 100px/50px; border-radius: 100px/50px; } ``` 三角形 三角形是另一种基本图形。使用CSS绘制三角形需要使用border属性。例如： ``` #triangle-up{ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } ``` 多边形 多边形是指具有三个以上顶点的图形。使用CSS绘制多边形需要使用多个三角形组合。例如： ``` #polygon{ width: 100px; height: 100px; background: red; position: relative; } #polygon:before{ content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } #polygon:after{ content: ""; position: absolute; top: 50px; left: 50px; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; } ``` 爱心 爱心是另一种基本图形。使用CSS绘制爱心需要使用多个圆形组合。例如： ``` #heart{ width: 100px; height: 100px; background: red; position: relative; } #heart:before{ content: ""; position: absolute; top: 0; left: 0; width: 50px; height: 50px; background: red; border-radius: 50px; } #heart:after{ content: ""; position: absolute; top: 25px; left: 25px; width: 50px; height: 50px; background: red; border-radius: 50px; } ``` 八卦 八卦是另一种基本图形。使用CSS绘制八卦需要使用多个圆形和椭圆组合。例如： ``` #bagua{ width: 100px; height: 100px; background: red; position: relative; } #bagua:before{ content: ""; position: absolute; top: 0; left: 0; width: 50px; height: 50px; background: red; border-radius: 50px; } #bagua:after{ content: ""; position: absolute; top: 25px; left: 25px; width: 50px; height: 25px; background: red; border-radius: 100px/50px; } ``` 使用纯CSS可以绘制各种基本图形，包括矩形、圆形、三角形、多边形、爱心、八卦等。这些图形可以用于设计和开发各种Web应用程序。