屏幕缩放时红色三角形无法固定的CSS布局问题求助

问题根源 #

当前三个元素为同级独立定位：

• 红色三角形仅设置position: absolute但未指定定位坐标，且无相对定位的父容器作为参照，默认以body为基准，缩放时无法和黄色块联动。
• 黑色三角形用position: relative+left:32%，实际是相对于自身初始位置偏移，依赖body宽度，并非真正和黄色块绑定。

解决方案 #

将两个三角形嵌套进黄色块内部，让黄色块作为它们的定位参照容器，通过绝对定位固定相对位置：

修改后的CSS

.yellow {
  width: 500px;
  height: 400px;
  background-color: yellow;
  position: relative; /* 作为子元素的定位基准 */
  margin: 0 auto; /* 可选：让整体居中显示 */
}

.triangle1 {
  width: 0;
  height: 0;
  border-left: 125px solid transparent;
  border-right: 125px solid transparent;
  border-top: 150px solid red;
  position: absolute;
  left: 0; /* 贴紧黄色块左侧边缘 */
  bottom: 100%; /* 定位在黄色块顶部 */
}

.triangle2 {
  width: 0;
  height: 0;
  border-left: 125px solid transparent;
  border-right: 125px solid transparent;
  border-top: 150px solid black;
  position: absolute;
  right: 0; /* 贴紧黄色块右侧边缘 */
  bottom: 100%; /* 定位在黄色块顶部 */
}

修改后的HTML

<head>
  <link rel="stylesheet" href="crown.css">
</head>

<body>
  <div class="yellow">
    <div class="triangle1"></div>
    <div class="triangle2"></div>
  </div>
</body>

额外响应式优化 #

如果需要适配不同屏幕尺寸，可将固定尺寸改为相对单位，让整体随屏幕缩放：

.yellow {
  width: 80%;
  height: 70vh;
  /* 其他样式不变 */
}

.triangle1, .triangle2 {
  border-left: 10vw solid transparent;
  border-right: 10vw solid transparent;
  border-top: 12vw solid;
}

.triangle1 {
  border-top-color: red;
}

.triangle2 {
  border-top-color: black;
}

内容的提问来源于stack exchange，提问作者11111