设计两个菱形一大一小 嵌套在一起

如果你想设计两个不同大小的菱形（通常为三角形），其中一个嵌套在另一个里面，可以继续使用 CSS 的伪元素 `::before` 和 `::after`。下面是一个例子，假设大菱形是外层，小菱形是内层：

<div class="container">
  <div class="inner-container"></div>
</div>

<style>
.container {
  position: relative;
  width: 200px; /* 大菱形宽度 */
  height: 100px;  /* 大菱形半高 */
}

.inner-container {
  position: absolute;
  width: 80px; /* 小菱形宽度 */
  height: 50px;  /* 小菱形半高 */
  left: 50%; /* 为了让小菱形居中于大菱形 */
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: #your-color; /* 小菱形颜色 */
}

.container::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 100px 0; /* 外层大菱形 */
  border-color: transparent transparent transparent #transparent;
  z-index: -1; /* 将大菱形置于小菱形下方 */
}

.container::before, .inner-container::before {
  transform-origin: bottom center;
}
</style>

这里 `.container` 类用于创建大菱形，而 `.inner-container` 类负责小菱形。注意，我们需要将小菱形的 `transform-origin` 设置为 `bottom center`，以便小菱形保持在大菱形内部并保持正确的旋转。