HTML布局问题

Question

有人可以帮忙吗？

我正在尝试使用 HTML 和 CSS 进行以下布局。此图像只是网站总体布局的粗略表示。 顶部栏(或标题)将是例如浅灰色和侧边栏 1 的颜色相同。侧边栏 1 也有一个圆形的左下角，侧边栏 2 有一个圆形的右上角。我试图重新创建的效果是页眉将“流入”边栏 1，而边栏 2 将“流入”页脚。到目前为止，我已经对这些框进行了编码，以便它们看起来像是在接触，而且我还完成了圆 Angular 。但是我一整天都在坚持的是如何处理颜色，这样看起来 1 正在流入下一个。这是我目前所拥有的示例(仍然非常粗糙，因为我只是想屏蔽形状等)hansmoolman.com

上面网站中的相关部分是名为“这是主容器”的部分，它位于页面的一半左右，包含侧边栏 1(带有 Twitter 提要的部分)和侧边栏 2(带有所有内容的部分) Lorenm Ipsum 的东西)。顶部栏将是带有 Logo 和导航内容的栏。页脚尚未实现。

谁能建议我该怎么做？我试图远离将代表这一点的背景图像，因为侧边栏 1 和 2 应该能够动态增长并且如果添加更多内容则彼此独立。或者这可以用背景图像来完成吗？

任何人都可以帮忙，因为我一直在研究的所有解决方案都变得非常困惑，盒子内部和其他盒子之上。它的代码看起来不太好，我担心它可能无法在所有设备上按预期显示。

如果这个问题需要更清楚的说明或代码，请告诉我，我可以同时提供。

提前致谢

*编辑 - 这是 flem 建议的可能解决方案

Answer 1

像这样用 div 构建布局(间距只是为了可见性):

您还需要在每个圆 Angular 后面有一个颜色相反的元素。 (如果你设置了你的 body 背景颜色，你只需要做其中之一。)