在页面顶部倾斜的酒吧

Question

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

我知道如何制作链接和内容，但我不知道如何制作包裹链接的蓝色倾斜条。显然，一个解决方案就是让它成为背景图像的一部分，但关注的是

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

2）我们可能希望背景图像是动态的或不断变化的，并且不断地编辑背景图像以包括上倾斜杆会很痛苦

如何做到这一点的一些方向将非常感谢！提前谢谢！

Answer 1

我建议你去做一个svg路径背景图片。这是我制作的一个与你需要的相似的东西。

请参阅JSFiddle here。

.diagonal {
  width: 100%;
  height: 117px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 100' fill='navy' preserveAspectRatio='none'><path d='M0 0 L100 0 L100 30 L0 100 Z' /></svg>") no-repeat;
}

<div class="diagonal"></div>

Answer 2

纯CSS方法：

＆＃13;

＆＃13;

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

＆＃13;

<div id="topbar-diagonal"/>

＆＃13;

＆＃13;

＆＃13;

Answer 3

一种非常棒的最先进的CSS方法。

＆＃13;

＆＃13;

  .diagonal {
    border-top: 36px solid #3366FF;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
  }

＆＃13;

<div class="diagonal"></div>

＆＃13;

＆＃13;

＆＃13;

请参阅https://bennettfeely.com/clippy/