javascript - 页面顶部的倾斜栏

我目前正在建立一个网站，主页上主要导航栏的理想设计如下所示：



我知道如何制作链接和内容，但不确定如何制作包裹链接的蓝色倾斜条。显然，一种解决方案是仅使其成为背景图像的一部分，但问题在于

1）做出响应可能并不容易

2）我们可能希望背景图像是动态的或不断变化的，因此经常不得不编辑背景图像以包含上斜条会很痛苦

有关如何做到这一点的一些方向将不胜感激！提前致谢！

最佳答案

纯CSS方法：

#topbar-diagonal {
  border-top: 36px solid #3366FF;
  border-bottom: 36px solid transparent;
  border-left: 100vw solid #3366FF;
}

<div id="topbar-diagonal"/>

关于javascript - 页面顶部的倾斜栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46759273/