html - 如何创建没有重叠边框的导航栏？

Question

我想创建一个如下所示的导航栏：https ://www.audacityteam.org/

我试过这个，但我认为这看起来不对。缺口的边框不应该位于左右占位符的顶部。我也觉得我把这弄得太复杂了；这可以用更少的 div 元素来完成吗？

:root {
  --background: black;
  --accent: silver;
}

body {
  margin: 0;
}

.placeholder {
  float: left;
  height: 20px;
  width: 30%;
  background: var(--background);
  border-bottom: 3px solid var(--accent);
}

.right {
  float: right;
}

.container {
  position: absolute;
  left: 25%;
  border-top: 50px solid var(--background);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  width: 40%;
}

.container-accent {
  position: absolute;
  left: 24.8%;
  border-top: 53px solid var(--accent);
  border-left: 53px solid transparent;
  border-right: 53px solid transparent;
  height: 0;
  width: 40%;
  transform: scale(1.008, 1.008);
}

<div class="placeholder"></div>
<div class="placeholder right"></div>

<div class="container-accent"></div>
<div class="container"></div>

标签： htmlcss