选项卡元素CSS下的形状(线)

我是CSS的初学者,但我目前正在尝试在每个选项卡下创建一个带有“line”的材质设计标题,就像在这个谷歌网站上一样: Our Products | Google

<header>
  [MY LOGO]
  <nav>
    <ul>
        <li><a href="" class="current-nav">tab 1</a></li>
        <li><a href="">tab 2</a></li>
        <li><a href="">tab 3</a></li>
    </ul>
  </nav>
</header>

和我的CSS:

header {
    display: table;
    background:#FFF;
    box-shadow: 0 0 8px 0 rgba(0,0,0,.3);
    width:100vw;
    clear: both;
    display: table;
    overflow: hidden;
    white-space: nowrap;
}

nav {
    display: inline-block;
    margin-left: 5vw;
    vertical-align: middle;
}
nav ul {
    display: inline-block;
    margin 0;
    padding: 0;
}
nav li {
    display: inline-block;
    margin-right: 3vw;
}
nav a {
    text-decoration: none;
}
nav a:visited {
    color: inherit;
}
nav a:hover,:active,:focus {
    color: #b82525;
}