javascript - 页面顶部的斜栏

Question

我目前正在实现一个网站，主页上主导航栏的理想设计如下所示:

我知道如何制作链接和其他内容，但不确定如何制作包含链接的蓝色斜条。显然，一个解决方案是将其作为背景图像的一部分，但问题是

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

2) 我们可能希望背景图像是动态的或不断变化的，而不断地编辑背景图像以包含上斜线会很痛苦

关于如何做到这一点的一些指导将不胜感激!提前致谢!

Answer 1

纯 CSS 方法:

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

<div id="topbar-diagonal"/>