CSS基础图形实例：正方形、圆形与多边形

本篇文章主要介绍了CSS中实现常见图形效果的基本实例代码，包括正方形、圆形、正三角形、倒三角形、梯形和平行四边形。这些图形通过CSS的宽度、高度、背景色以及边框样式来创建。 1. **正方形 (Square)** 使用`.square`类定义了一个红色的60x60像素正方形，通过设置`width`和`height`属性为固定尺寸，并指定`background`颜色为红色。 2. **圆形 (Circle)** 圆形的实现稍微复杂些，`.circle`类设置了固定的宽度和高度，同样为红色背景。为了实现圆角效果，使用了浏览器特定的CSS前缀（`-moz-` for Firefox, `-webkit-` for Safari/Chrome）来设置`border-radius`属性，这里设为30%，不过需要注意的是，对于低版本的Android浏览器，可能不支持百分比值，因此可能需要调整其他兼容性解决方案。 3. **正三角形 (TriangleUp)** `triangle-up`通过CSS的`border`属性创建一个上指的三角形，通过设置不同边的宽度和透明度，使得三个边形成一个斜三角形。 4. **倒三角形 (TriangleDown)** 类似于正三角形，但`border-bottom`被设置为0，形成一个倒置的三角形。 5. **梯形 (Trapezoid)** `.trapezoid`使用了`border-bottom`来创建梯形的底部，通过透明边使顶部消失，同时设置`height`为0，以保持宽度为60像素。 6. **平行四边形 (Parallelogram)** 平行四边形通过`width`和`height`定义，然后利用Webkit内核的`-webkit-transform: skewX()`属性倾斜形状，虽然没有直接展示代码，但通常会结合这个属性来实现。 总结来说，这篇文章展示了如何利用CSS的基本属性和技巧来创建基础图形元素，这对于UI设计和前端开发人员在构建网站布局时理解并实现各种视觉效果至关重要。通过这些实例，开发者可以更好地掌握CSS在图形造型方面的灵活性，并考虑到不同浏览器的兼容性问题。