は、私は、ナビゲーションのこの応答下矢印を作るにはどうすればよい

Question

.vertical { 
    height: 0; 
    border-left: 122px solid transparent; 
    border-right: 108px solid rgba(0, 0, 0, .0001); 
    border-top: 100px solid #222222; 
    /* width: 13px; */ 
    position: absolute; 
    /* text-align: center; */ 
    /* vertical-align: middle; */ 
    margin-left: 40%; 
    z-index: -99; 
    margin-top: -86px; 
} 

Vertical

はここ

Answer 1

この

マークアップを試してみてくださいナビゲーションのこの応答下矢印をどのように作るのですか

<ul class="nav"> 
    <li class="nav-item">Portfolio</li> 
    <li class="nav-item">About</li> 
    <li class="nav-item is-active">Blog</li> 
    <li class="nav-item">Get in Touch</li> 
</ul> 

SCSS

$nav-background: #2a2a2a; 
$nav-item-padding: 10px; 
$nav-item-color: #c0c0c0; 
$nav-item-active-color: #f1f1f1; 
.nav { 
    height: 60px; 
    background-color: $nav-background; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-family: arial; 
} 

.nav-item { 
    list-style: none; 
    padding: $nav-item-padding; 
    color: $nav-item-color; 

    &.is-active { 
     color: $nav-item-active-color; 
     background: darken($nav-background, 20%); 
     border-radius: 4px; 
     position: relative; 

     &:after { 
      content: ""; 
      width: 0; 
      height: 0; 
      border-left: 30px solid transparent; 
      border-right: 30px solid transparent; 
      border-top: 30px solid $nav-background; 
      position: absolute; 
      bottom: 0; 
      left: 50%; 
      transform: translate(-50%, 100%); 
     } 
    } 
} 

https://jsfiddle.net/robi_osahan/fj6at1cd/