css画一个几何图形 |css过渡动画

.rectangle {
width: 200px;
height: 100px;
background-color: #42b983;
}

以上代码将生成一个宽200像素、高100像素、背景颜色为#42b983的矩形。接下来大家来看怎样绘制一个三角形：

.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #42b983;
}

以上代码将生成一个底边长为100像素、颜色为#42b983的三角形。要绘制三角形，大家需要用到CSS的border属性，它可以用来设置边框的大小、颜色、形状等。其中，border-left、border-right和border-bottom分别用来设置三角形的三条边，它们的宽度可以通过边框的size参数来控制。由于大家只需要绘制一个向下的三角形，所以border-left和border-right的宽度都为50像素，并且颜色透明，而border-bottom的宽度为100像素，颜色为#42b983。

除了矩形、三角形，大家还可以绘制出梯形、菱形、五边形等等几何图形。掌握这些技巧，对于网页设计和实现来说都是非常有用和必要的。