<nav>

    <ul>

        <li>Home</li>

        <li>Products</li>

        <li>Services</li>

        <li>Contact</li>

    </ul>

</nav>

<nav>

    <ul>

        <li>Home</li>

        <li>Products</li>

        <li>Services</li>

        <li>Contact</li>

    </ul>

</nav>

<nav>

    <ul>

        <li>Home</li>

        <li>Products</li>

        <li>Services</li>

        <li>Contact</li>

    </ul>

</nav>

html, body {

    margin:;

    padding:;

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}

nav{

    --h: 3em;

}

nav:nth-child(1){

    --rate: 1.5;

    --bgcolor: black;

}

nav:nth-child(2){

    --rate: 1.732;

    --bgcolor: brown;

}

nav:nth-child(3){

    --rate:;

    --bgcolor: green;

}

nav ul{

    padding:;

}

nav ul li{

    position: relative;

    list-style-type: none;

    width: calc(var(--h) * var(--rate));

    height: var(--h);

    line-height: var(--h);

    margin: 2em;

    background-color: var(--bgcolor);

    color: white;

    font-family: sans-serif;

    text-align: center;

}

/* 用伪元素增加2个倾斜的矩形 */

nav ul li::before,

nav ul li::after{

    position: absolute;

    top:;

    left:;

    content: '';

    /* inherit : 继承 */

    width: inherit;

    height: inherit;

    background-color: var(--bgcolor);

    z-index: -1;

    filter: opacity(0);

    transition: 0.3s;

}

nav ul li::before{

    /* 角度 位置 */

    transform: rotate(60deg) translateX(calc(var(--h) * -2));

}

nav ul li::after{

    transform: rotate(-60deg) translateX(calc(var(--h) * 2));

}

nav ul li:hover::before{

    filter: opacity(1);

    transform: rotate(60deg) translateX(0);

}

nav ul li:hover::after{

    filter: opacity(1);

    transform: rotate(-60deg) translateX(0);

}