round tab, css

<nav>
    <a href="#home" style="--clr: #ff4d4d;" class="active">Home</a>
    <a href="#about" style="--clr: #c56cf0;">About</a>
    <a href="#services" style="--clr: #ffeaa7; ">Services</a>
    <a href="#portfolio" style="--clr:#17c0eb; ">Portfolio</a>
    <a href="#contact" style="--clr:#fd79a8; ">Contact</a>
</nav>

header nav a.active {
    background: var(--clr);
}
header nav a.active::before {
    content: '';
    position: absolute;
    left: -20px;
    bottom: 0;
    width: 20px;
    height: 20px;
    background: transparent;
    border-bottom-right-radius: 10px;
    box-shadow: 5px 5px 0 5px var(--clr);
    z-index: 2;
}
header nav a.active::after {
    content: '';
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 20px;
    height: 20px;
    background: transparent;
    border-bottom-left-radius: 10px;
    box-shadow: -5px 5px 0 5px var(--clr);
    z-index: 2;
}