如何正确缩放由4个三角形组成的正方形？解决缩放错位问题

我实现了一个由4个三角形构成的正方形效果，当窗口缩小（进行缩放操作）时，这些三角形无法保持组合状态，出现错位混乱的情况。请问如何修复该问题以实现正确的缩放？

复现步骤：调整窗口大小，即可看到三角形错位散开的现象。

问题根源 #

当前三角形样式使用固定像素值（如180px、320px）定义边框尺寸，这些值不会随窗口或父容器尺寸变化而调整，导致窗口缩放时，三角形的尺寸和定位无法与容器同步，最终出现错位。

修复代码 #

将原有的.panel-*相关CSS替换为以下代码，使用相对单位实现自适应：

.panel-left,
.panel-right,
.panel-up,
.panel-down{
  position: absolute;
  transition: all 8s ease;
  transition-delay: 0s;
  overflow: hidden;
  width:0;
  height:0;
}
.panel-up {
  left: 0;
  bottom: 50%;
  /* 基于视口宽度的相对单位，匹配16:9比例 */
  border-top: calc(28.125vw) solid red;
  border-left: calc(50vw) solid transparent;
  border-right: calc(50vw) solid transparent;
  /* 限制最大尺寸，与curtain的max-width匹配 */
  max-width: 640px;
  max-height: 360px;
}
.panel-down {
  left: 0;
  top: 50%;
  border-bottom: calc(28.125vw) solid blue;
  border-left: calc(50vw) solid transparent;
  border-right: calc(50vw) solid transparent;
  max-width: 640px;
  max-height: 360px;
}
.panel-left {
  top: -50%;
  bottom: -50%;
  margin: auto 0;
  border-left: calc(50vw) solid green;
  border-top: calc(28.125vw) solid transparent;
  border-bottom: calc(28.125vw) solid transparent;
  max-width: 640px;
  max-height: 360px;
}
.panel-right {
  top: -50%;
  bottom: -50%;
  right: 0;
  margin: auto 0;
  border-right: calc(50vw) solid yellow;
  border-top: calc(28.125vw) solid transparent;
  border-bottom: calc(28.125vw) solid transparent;
  max-width: 640px;
  max-height: 360px;
}

/* 大屏幕下恢复固定尺寸，保持原始设计 */
@media (min-width: 640px) {
  .panel-up, .panel-down {
    border-top-width: 180px;
    border-bottom-width: 180px;
    border-left-width: 320px;
    border-right-width: 320px;
  }
  .panel-left, .panel-right {
    border-left-width: 320px;
    border-right-width: 320px;
    border-top-width: 180px;
    border-bottom-width: 180px;
  }
}

关键修改说明 #

1. 相对单位替换固定像素：使用vw（视口宽度单位）结合calc()计算边框尺寸，确保三角形随窗口宽度同步缩放，28.125vw = 50vw * 0.5625，与ratio-keeper的padding-top:56.25%保持一致，维持16:9的比例。
2. 限制最大尺寸：添加max-width和max-height，确保三角形在大屏幕上不会超出curtain容器的最大宽度（640px）。
3. 媒体查询适配大屏幕：当视口宽度≥640px时，恢复固定像素值，保持原始设计的尺寸比例。

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