美化Html的导航条

.content{
        overflow-y: auto;
        mask-image: linear-gradient(to top, transparent, black),
        linear-gradient(to left, transparent 17px, black 17px);
        mask-repeat: no-repeat; 
        mask-size: 100% 100%, 100% 100%;
        mask-position: bottom, center;
        height: 10px;
}



<div class='content'>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>