Html 创建一个居中的、全页面宽度的标题，其中一边比另一边高

我试图建立一个相当复杂的标题。它应该是这样的：

如您所见，页眉需要在页面上居中，但元素需要扩展页面的宽度。我遇到的问题是，我无法正确地扩展白色部分。这就是我目前拥有的：

我想不出任何方法可以将白色背景延伸到左侧的黑色条上。我可以使用

：before

，但只能在特定的缩放级别（在某些点上，徽标和重叠的

：before

，之间会出现一个间隙，导致一点黑条渗出），我们需要在所有缩放级别上使用它

我唯一的另一个想法是在整个导航中使用极宽的背景图像，但我认为这也不是一个可接受的解决方案

有人有什么建议吗

---

演示：

在您当前的代码上尝试一下（我使用了您当前的#headerLeft:after伪元素）：

总之，我只是使用一个伪元素来覆盖左侧的白色部分。所以我把它放在一个很高的宽度上，我把它放在相对于logo的位置上

---

请随意将它放在另一个元素/伪元素上：我想这是一个清晰的修复。

非常感谢。我想我是想得太多了。

#headerWrapper header #headerLeft:after {
/* clear: both; */
content: "\0020";
display: block;
/* visibility: hidden; */
/* zoom: 1; */
width: 1000px;
height: 50px;
background: white;
top: 50px;
right: 100%;
position: absolute;
margin-right: -60px;
}