css 实现一个高度及宽度变化等腰四边形顶部角度不变化的等腰四边形

要使用CSS创建一个高度和宽度可以变化但顶部角保持不变的等腰四边形，你可以利用伪元素`::before`和`::after`结合CSS `transform`属性来实现。这里是一个简单的例子：

.container {
  position: relative;
}

.shape {
  width: 200px; /* 或者任何你想设置的固定宽度 */
  height: 0; /* 高度为0，将创建一个三角形 */
  background-color: #f00; /* 任意颜色，这里是红色示例 */
  overflow: hidden; /* 防止内容溢出 */
}

.shape::before,
.shape::after {
  content: '';
  position: absolute;
  top: 50%; /* 保证对齐中心 */
  left: 0;
}

.shape::before {
  transform: rotate(45deg); /* 创建底边 */
  width: calc(50% - 10px); /* 减去两倍边距，形成等腰三角形 */
  height: calc(50% * sqrt(2)); /* 计算等腰三角形的高度 */
  margin-top: -50%; /* 上移至顶部，保证对齐 */
  border-right: 10px solid transparent; /* 边框透明以保持颜色一致 */
}

.shape::after {
  transform: rotate(-45deg); /* 创建顶角 */
  width: calc(50% + 10px);
  height: calc(50% * sqrt(2));
  margin-top: -50%;
  border-left: 10px solid transparent;
}

在这个例子中，`.shape`是你的四边形容器，它有两个伪元素，一个用于创建底边，另一个用于创建顶角。通过调整 `.shape` 的宽度和高度，以及伪元素的尺寸，你可以改变整个四边形的大小。