30个 CSS 样式常用的静态形状，资深前端开发带你入门Framework

在CSS中，创建静态形状可以使用各种属性，如width、height、background-color等。以下是创建一些常见静态形状的示例代码：

1. 矩形（Rectangle）

.rectangle {
  width: 200px;
  height: 100px;
  background-color: blue;
}

2. 圆形（Circle）

.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
}

3. 三角形（Triangle）

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

4. 平行四边形（Parallelogram）

.parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(-20deg);
  background-color: purple;
}

5. 正方形（Square）

.square {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

6. 椭圆形（Ellipse）

.ellipse {
  width: 200px;
  height: 100px;
  background-color: pink;
  border-radius: 50px / 50px;
}

7. 菱形（Diamond）

.diamond {
  width: 0;
  height: 100px;
  background-color: orange;
  transform: rotate(-45deg);
}

8. 五边形（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等）或者自定义样式来进一步美化和布局这些静态形状。