如何将多边形三角形对齐到div底部，与onebysign联动且保持响应式？

要让三角形完美衔接在onebysign div的正上方，同时保证屏幕尺寸变化时位置始终不变，我们可以通过调整结构和定位逻辑来实现，具体方案如下：

核心思路 #

由于onebyone是相对定位的容器，我们可以把三角形和onebysign放在同一个绝对定位的容器中，让这个容器固定在onebyone的底部。这样两者的相对位置会始终保持衔接，再配合SVG的自适应特性，就能轻松实现响应式效果。

修改后的完整代码 #

HTML结构 #

<div class="row events">
  <div class="onebyone">
    <div class="onebytext">
      <div class="textInfo">Test</div>
    </div>
    <!-- 新增共同容器，包裹三角形和按钮区域 -->
    <div class="sign-container">
      <div class="triangle" data-type="vertical_parallax" data-speed="2">
        <svg x="0px" y="0px" width="410" height="410" viewBox="0 0 310 310">
          <polyline fill="#CC0000" points="0,0 0,20 310,20" />
        </svg>
      </div>
      <div class="onebysign">
        <button class="submitBtn">Something</button>
      </div>
    </div>
  </div>
</div>

CSS样式 #

body { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; background-color: #f2f2f2; }
.events { padding: 20px 100px; }
.textInfo { text-transform: uppercase; font-weight: 600; color: #085DAD; padding: 10px; background-color: white; }
.onebyone { background-color: grey; width: 100%; padding-top: 100%; /* 1:1 固定比例 */ position: relative; background-size: cover; }
.onebytext { position: absolute; top: 10px; left: 0; bottom: 0; right: 0; text-align: center; font-size: 32px; color: white; width: 90%; left: 5%; }
/* 新增容器：固定在onebyone底部，确保整体位置不变 */
.sign-container {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}
/* 调整三角形样式：去掉绝对定位，让它自然占满容器宽度 */
.triangle {
  width: 100%;
}
/* 简化按钮区域样式：移除绝对定位，自然排列在三角形下方 */
.onebysign {
  text-align: center;
  font-size: 24px;
  background-color: red;
  color: white;
}
.submitBtn { background-color: #0099CC; text-transform: uppercase; padding: 10px; border-radius: 50px; border: 0; width: 70%; margin: 10px 0; }
svg { width: 100%; height: auto; }

关键调整说明 #

• 新增sign-container：通过绝对定位固定在onebyone的底部，让三角形和按钮区域作为一个整体，始终停留在容器最下方。
• 移除三角形的绝对定位：让它作为块级元素自然占满容器宽度，SVG的width:100%会自动适配屏幕尺寸，保证三角形宽度和下方按钮区域完全匹配。
• 简化按钮区域定位：去掉原来的绝对定位，让它在容器中自然排列在三角形下方，两者始终保持无缝衔接，不会出现错位。

这样调整后，无论屏幕尺寸如何变化，三角形都会牢牢贴在onebysign的正上方，完美满足需求。

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