Html 如何使用CSS/Bootstrap 3制作斜线

我怎样才能用斜线制作这样的页面

例如，我能把角度设为20度吗？我必须放三个div

现在我把第一个div放在中间，然后把导航条放进去，我希望导航条与斜线上的角度对齐。 我必须在Bootstrap3上工作 我有点迷路了。非常感谢您的帮助和解释

<div class="container" style="background-color: #04342E; width:100%">
            <img class="img-responsive center-block" style="height: 600px; align-items: center;"; src="/i/gp-logo.png" />
 <nav class="navbar navbar-default" style="justify-content: space-between; background-color: transparent; background: transparent; border-color: transparent;">
                <ul class="nav navbar-nav" style="text-decoration: none">
                    <li class="nav-item">
                      <a class="nav-link active" href="#" style="color: white;">Accueil</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#" style="color: white;">Tableaux</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#" style="color: white;">Papeterie</a>
                    </li>
                     <li class="nav-item">
                      <a class="nav-link" href="#" style="color: white;">Book</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#" style="color: white;">A propos</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#" style="color: white;">Contact</a>
                    </li>
                </ul>
            </nav>
            <div>   
        </div> 
      </div>

您可以使用

剪辑路径创建div

我建议您使用：

要么使用具有线性渐变的背景

带剪辑路径的演示：

正文{
背景：#04342E；
保证金：0；
}
等分多边形{
高度：100vh；
宽度：100vw；
背景：白色；
剪辑路径：多边形（0.25%，100%0，100%100%，0.75%）；
显示器：flex；
}
.内容{
身高：50%；
宽度：100%；
背景色：rgba（255,0,0,0.3）；/**仅用于显示写入区域，但应将其删除**/
保证金：自动；
}

乱数假文

您可以使用

剪辑路径创建div

我建议您使用：

要么使用具有线性渐变的背景

带剪辑路径的演示：

正文{
背景：#04342E；
保证金：0；
}
等分多边形{
高度：100vh；
宽度：100vw；
背景：白色；
剪辑路径：多边形（0.25%，100%0，100%100%，0.75%）；
显示器：flex；
}
.内容{
身高：50%；
宽度：100%；
背景色：rgba（255,0,0,0.3）；/**仅用于显示写入区域，但应将其删除**/
保证金：自动；
}

乱数假文

.container{
背景色：#04342E；
宽度：100%；
高度：500px；
位置：相对位置；
}
.容器：：之后{
位置：绝对位置；
内容：“；
左：0px；
右：0px；
底部：0px；
边框底部：纯白500px；
变换原点：右下角；
变换：倾斜（1000度）；
}
.容器#内容物{
背景色：#04342E；
宽度：100%；
高度：500px；
边缘顶部：600px；
位置：相对位置；
}
.container#content:：after{
位置：绝对位置；
内容：“；
顶部：0px；
右：0px；
左：0px；
边框顶部：纯白500px；
变换原点：左上角；
变换：倾斜（-1000度）；
}

.container{
背景色：#04342E；
宽度：100%；
高度：500px；
位置：相对位置；
}
.容器：：之后{
位置：绝对位置；
内容：“；
左：0px；
右：0px；
底部：0px；
边框底部：纯白500px；
变换原点：右下角；
变换：倾斜（1000度）；
}
.容器#内容物{
背景色：#04342E；
宽度：100%；
高度：500px；
边缘顶部：600px；
位置：相对位置；
}
.container#content:：after{
位置：绝对位置；
内容：“；
顶部：0px；
右：0px；
左：0px；
边框顶部：纯白500px；
变换原点：左上角；
变换：倾斜（-1000度）；
}

非常感谢您的回答。这样，我可以在白色部分添加内容吗？@Kimako是的，你可以，我编辑了我的代码片段，告诉你在哪里可以写（红色条带），只需删除背景色。是的，你能行，你这个笨蛋！非常感谢，真的。非常感谢你的回答。这样，我可以在白色部分添加内容吗？@Kimako是的，你可以，我编辑了我的代码片段，告诉你在哪里可以写（红色条带），只需删除背景色。是的，你能行，你这个笨蛋！非常感谢，真的。它也起作用了，非常感谢你抽出时间。是否可以使菜单名跟随斜线？（就在上面）它也在工作，非常感谢您抽出时间。是否可以使菜单名跟随斜线？（就在上面）