<nav class="contentNavi--type008">
  <ul>
    <li><a href="#">コンテンツメニュー名</a></li>
    <li><a href="#">コンテンツメニュー名</a></li>
    <li><a href="#">コンテンツメニュー名</a></li>
    <li><a href="#">コンテンツメニュー名</a></li>
  </ul>
</nav>
                

.contentNavi--type008{
  display:block;
  >ul{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:0 1em;
    position:relative;
    z-index: 1;
    >li{
      width:calc(50% - 0.5em);
      margin-bottom:0.5em;
      display:block;
      a{
        text-align:center;
        display:block;
        position:relative;
        color:#FFF;
        padding:0.4em 1em 1.2em 1em;
        line-height:1.5;
        background:#666;
        border-bottom:none;
        clip-path: polygon(100% 0%, 100% 60%, 50% 100%, 0% 60%, 0% 0%);
        &:hover{
          color:#DDD;
        }
      }
    }
  }
}
@media print, screen and (min-width: 768px) {
  .contentNavi--type008>ul{
    >li{
      width:auto;
      a{
        padding:0.5em 1em 1em 1em;
        clip-path: polygon(100% 0%, 100% 70%, 50% 100%, 0% 70%, 0% 0%);
      }
    }
  }
}