在CSS中，创建静态形状可以使用各种属性，如width、height、background-color等。以下是创建一些常见静态形状的示例代码：
- 矩形（Rectangle）
.rectangle {
width: 200px;
height: 100px;
background-color: blue;
}
- 圆形（Circle）
.circle {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
- 三角形（Triangle）
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid green;
}
- 平行四边形（Parallelogram）
.parallelogram {
width: 150px;
height: 100px;
transform: skew(-20deg);
background-color: purple;
}
- 正方形（Square）
.square {
width: 100px;
height: 100px;
background-color: yellow;
}
- 椭圆形（Ellipse）
.ellipse {
width: 200px;
height: 100px;
background-color: pink;
border-radius: 50px / 50px;
}
- 菱形（Diamond）
.diamond {
width: 0;
height: 100px;
background-color: orange;
transform: rotate(-45deg);
}
- 五边形（Pentagon）
.pentagon {
width: 54px;
height: 80px;
background-color: black;
position: relative;
}
.pentagon::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 54px;
height: 40px;
background-color: black;
transform: rotate(72deg) translate(27px, -20px);
}
.pentagon::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 54px;
height: 40px;
background-color: black;
transform: rotate(-72deg) translate(27px, 20px);
}
这些CSS样式可以直接应用于HTML元素中，以创建静态形状。在实际开发中，可以根据需要结合CSS框架（如Bootstrap、Foundation等）或者自定义样式来进一步美化和布局这些静态形状。