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

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>