Html 嵌套的倾斜div以及如何正确填充它们？

我在使用CSS和HTML创建所需的布局时遇到问题

我想要的是一个方向倾斜的div，然后沿着x轴有一个笔直的背景。类似于下图的内容：

到目前为止，我的尝试都是徒劳的，你可以在这里看到。我需要内div延伸到外div点的全宽

---

有人有什么想法吗？

这是一个黑客版本，你可以用它作为起点：

它更复杂，因为您需要在菜单后面显示标题下的背景。因此，菜单后的白色栏需要另一个元素。我已经将白色区域设置为%width，但菜单不是这样，因此需要对其进行修复，以确保它们不会重叠

基本技术是倾斜白色区域以获得对角线，并反向倾斜h1以使文本笔直。然后添加一个负边距以隐藏元素的左侧

header {
    transform: skewX(-35deg);
    margin-left: -5em
}

header h1 {
    padding: 4em;
    -webkit-transform: skewX(35deg);
}

然后我绝对定位菜单项，使其位于导航的左下角，并将其旋转到正确的角度，原点位于左下角。然后我摆弄这个位置，直到第一件物品放在正确的位置：

nav li {

    transform: rotate(-55deg);
    transform-origin: bottom left;

    position: absolute;
    bottom: -2.6em;
    left: 0em;
}

最后，我分别选择了每个菜单项，并将其添加到左边的值中，以正确显示它们：

导航李：第n种类型2{ 左：2.5em； }

等等

理想情况下，菜单将保留在文档流中，这样您就不必手动定位每个菜单项。这也许是可能的，但我已经没有时间去调查了。我相信您可以在此基础上进行构建。

我建议您尝试使用border width属性。这将解决您的问题。 这是你的电话号码

HTML：

<div class="abc">&nbsp;</div>

---

希望这能有所帮助。

当你说，正如你在这里看到的，这里在哪里？获得了答案，这让我开始了。

.abc {
    width: 200px;
    height: 0px;
    border-color: lightgray transparent;
    border-style: solid;
    border-width: 350px 350px 0px 0px;
    position:relative;
    display:block;
    margin-left:50px;
}