如何制作这个响应的导航底部箭头

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/