Html 如何使用引导创建带有css形状的导航栏？

我需要创建如下所示的导航栏

我已经使用背景图像导航栏的工作，但它将显示在选项卡和移动视图一样

仅供参考， 选项卡和移动响应将如下所示（仅设计而非文本）

---

我需要创建这个没有背景图像。你能帮我…

看看我用的

skewX

正文{
填充顶部：50px；
背景：url(https://images.pexels.com/photos/74775/pexels-photo-74775.jpeg?w=940&h=650&auto=compress&cs=tinysrgb);
背景尺寸：封面；
}
.navbar.navbar-reverse{
背景：rgba（0,0,0,0.45）；
边界：无；
}
.navbar品牌{
位置：相对位置；
}
.navbar品牌：之后{
内容：''；
位置：绝对位置；
右图：-100%；
背景：#fff；
左：-500px；
身高：100%；
排名：0；
z指数：-1；
变换：skewX（-45度）；
}
.导航栏折叠.导航栏导航{
浮动：对；
}
@介质（最大宽度：767px）{
.导航栏折叠.导航栏导航{
浮动：无；
}
}

引导启动程序模板
将此文档用作快速启动任何新项目的一种方式。
您得到的只是此文本和一个基本上没有内容的HTML文档

您尝试过什么？你添加的链接与上面有背景图片的url完全不同。但它是重复的…还有一件事我需要这个没有背景图像…你想创建一个有角度的形状之间的标志和导航？阅读有关线性梯度<代码>背景：线性渐变（-45度，红色50%，蓝色0）-->试试这个