Html 将多边形三角形与div底部对齐

我有一个三角形多边形，但有一个问题，我想把它放在“onebysign”div的正上方，但定位不起作用，它还必须保持响应，所以当我更改屏幕大小时，多边形会保持在它的位置

所以基本上：我希望多边形三角形div与onebysign某物div“连接”，它必须保持响应，并且在屏幕宽度改变时不移动

JSfiddle：

HTML和CSS：

身体{ 字体系列：Arial、Helvetica Neue、Helvetica、无衬线字体； 背景色：F2F2； } .事件{ 填充：20px 100px； } .textInfo{ 文本转换：大写； 字号：600； 颜色：085DAD； 填充：10px； 背景色：白色； } .一个接一个{ 背景颜色：灰色； 宽度：100%； 填充顶部：100%； /*1:1纵横比*/ 位置：相对位置； /*如果你想要里面有文字*/ 背景尺寸：封面； } .onebytext{ 位置：绝对位置； 顶部：10px； 左：0； 底部：0； 右：0； 文本对齐：居中； 字体大小：32px； 颜色：白色； 宽度：90%； 左：5%； } .onebysign{ 位置：绝对位置； 左：0； 底部：0px； 右：0； 文本对齐：居中； 字体大小：20px； 背景色：红色； 字体大小：24px； } .onebytext， .onebysign{ 位置：绝对位置； 文本对齐：居中； 颜色：白色； } .submitBtn{ 背景色：0099CC； 文本转换：大写； 填充：10px； 边界半径：50px； 边界：0px； 宽度：70%； 利润率：10px0； } .三角形{ 宽度：100%； 位置：绝对位置； 左：0px； 顶部：0px； } svg{ 宽度：100%； 高度：自动； } 测验 某物

---

一个简单的解决方案是从svg中删除宽度/高度，并调整viewbox以覆盖多边形的所需部分，然后可以轻松使用定位：

身体{ 字体系列：Arial、Helvetica Neue、Helvetica、无衬线字体； 背景色：F2F2； } .事件{ 填充：20px 100px； } .textInfo{ 文本转换：大写； 字号：600； 颜色：085DAD； 填充：10px； 背景色：白色； } .一个接一个{ 背景颜色：灰色； 宽度：100%； 填充顶部：100%； /*1:1纵横比*/ 位置：相对位置； /*如果你想要里面有文字*/ 背景尺寸：封面； } .onebytext{ 位置：绝对位置； 顶部：10px； 左：0； 底部：0； 右：0； 文本对齐：居中； 字体大小：32px； 颜色：白色； 宽度：90%； 左：5%； } .onebysign{ 位置：绝对位置； 左：0； 底部：0px； 右：0； 文本对齐：居中； 字体大小：20px； 背景色：红色； 字体大小：24px； } .onebytext， .onebysign{ 位置：绝对位置； 文本对齐：居中； 颜色：白色； } .submitBtn{ 背景色：0099CC； 文本转换：大写； 填充：10px； 边界半径：50px； 边界：0px； 宽度：70%； 利润率：10px0； } .三角形{ 宽度：100%； 位置：绝对位置； 左：0px； 底部：51px； } svg{ 宽度：100%； 高度：自动； } 测验 某物

---

比如？@Pedram不是真的，我希望三角形与另一个红色DIV连接，并且仍然有响应性检查，但是你不能让这个示例有响应性，因为你在每个部分上多次使用绝对位置。你应该重新编码。@Pedram是的，我确实已经尝试过你的解决方案，但我想也许有一种方法可以修复它，而不必重新编码整个东西：实际上，要使绝对容器和其中的元素响应非常困难，我建议你重新编码。你是个英雄！为此奋斗了这么长时间，但效果完美，第二个解决方案确实对我最有效。谢谢