html - 使用 svg 创建全宽导航

Question

我正在尝试创建 this使用 SVG 导航。我得到了一个 SVG，但是它没有用，所以 SO 上的某个人帮我做了另一个。但是现在我不确定如何使用

创建导航

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xl="http://www.w3.org/1999/xlink" version="1.1"
    width="576" height="152" viewbox="0 0 576 152">
  <path transform="translate(10,-185)" d="M 0 189.5 L 39.741071 261.25 L 0 333.125 L 516.63393 332 L 556.375 260 L 516.63393 188 L 0 189.5 Z" stroke="black" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="10" fill="transparent" />
</svg>

我当前的导航看起来像

<nav>
    <ul>
        <li class="completed"><a href="#">Exam</a> <i class="fa fa-check-circle"></i></li>
        <li><a href="#">Personal <i class="fa fa-times-circle"></i></a></li>
        <li><a href="#">Employment</a></li>
        <li><a href="#">Appointment</a></li>
        <li><a href="#">Record Check</a></li>
        <li><a href="#">Submit</a></li>
    </ul>
</nav>

只有白色背景。所以它看起来很接近图像的样子，只是减去 SVG 形状。

Answer 1

首先，您的 SVG 需要进行一些更改以正确缩放自身(使用 preserveAspectRatio="none")并根据您的特定布局进行更多调整:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="576" height="152" viewbox="0 0 576 152" preserveAspectRatio="none">
  <path transform="translate(10, -185)" d="M 0 189.5 L 39.741071 261.25 L 0 333.125 L 516.63393 332 L 556.375 260 L 516.63393 188 L 0 189.5 Z" stroke="black" stroke-opacity="0.1" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="2" fill="white" />
</svg>

这是使用它的 CSS:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
}

nav li {
  background: url('path/to/your.svg') no-repeat;
  background-size: 100% 100%;
  flex: 1 1 auto;
  margin: 0 -5px;
}

nav a {
  display: block;
  font: bold 1rem Sans-serif;
  color: rgba(0, 0, 0, .25);
  padding: 1em 2em;
  text-align: center;
  text-decoration: none;
}

nav li.completed a {
  color: rgba(0, 0, 0, .5);
}

如果你愿意，这里有一个 working sample .