Html 我有一个基本的CSS问题，关于在浏览器的宽度上拉伸形状

我有一个基本的CSS问题，关于在浏览器的宽度上拉伸形状

我想把矩形放在两个三角形之间

这是我的HTML：

    <div id="monitor_top_left"></div>
    <div id="monitor_top_middle"></div>
    <div id="monitor_top_right"></div>

---

我的浮点属性有问题，在三角形之间得到矩形。我需要矩形为响应性设计的流体。

您只需修改

\monitor\u top\u middle

#monitor_top_middle {
    width: calc(100% - 200px);
    /* I need to stretch across the page */
    height: 60px;
    background: #AFA995;
    float: left;
}

---

您可以将它们全部向左浮动，并为它们指定适当的宽度：

#monitor_top_left {
    width: calc(15% -100px); /* consider the border */
    height: 0;
    border-bottom: 60px solid #AFA995;
    border-left: 100px solid #5C5A4D;
    float: left;
}
#monitor_top_middle {
    width: 70%;        /* I need to stretch across the page */
    height: 60px;
    background: #AFA995;
    float: left;
}
#monitor_top_right {
    width: calc(15% - 100px); /* consider the border */
    height: 0;
    border-bottom: 60px solid #AFA995;
    border-right: 100px solid #5C5A4D;
    float: left;
}

---

示例：

您有屏幕截图吗？它应该是什么样子？非常感谢。正如你可能猜到的，我正处于HTML的开始阶段，我没有意识到我可以将“100%-200px”作为中间宽度。这是我今天的教训。很高兴能帮助你，考虑到每边框100px。谢谢。我相信这很简单，但我需要一些东西。很高兴这对你有用（别忘了将问题标记为已回答：P）

#monitor_top_left {
    width: calc(15% -100px); /* consider the border */
    height: 0;
    border-bottom: 60px solid #AFA995;
    border-left: 100px solid #5C5A4D;
    float: left;
}
#monitor_top_middle {
    width: 70%;        /* I need to stretch across the page */
    height: 60px;
    background: #AFA995;
    float: left;
}
#monitor_top_right {
    width: calc(15% - 100px); /* consider the border */
    height: 0;
    border-bottom: 60px solid #AFA995;
    border-right: 100px solid #5C5A4D;
    float: left;
}