Edit in JSFiddle

* {
    margin: 0;
    padding: 0;
    position: relative;
}
#mask-links {
    clip-path: url("#clipping4");
    -webkit-clip-path: url("#clipping4");
    height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 255px;
}

#mask-links > ul:last-child {
    margin-bottom: 20px;
}
#mask-links > ul:first-child {
    margin-top: 20px;
}
#mask-links ul {
    list-style-type: none;
    padding: 0;
    width: 240px;
}
#mask-links li {
    padding: 15px;
    color: #fff;
    font-size: 1rem;
    font-family: verdana;
}
#mask-links li:nth-child(2n+1) {
    background: #FF7361;
}
#mask-links li:nth-child(2n) {
    background: #8DA889;
}

<div id="mask-links">
<ul>
<li>Item nº 1</li>
<li>Item nº 2</li>
<li>Item nº 3</li>
<li>Item nº 4</li>
<li>Item nº 5</li>
<li>Item nº 6</li>
<li>Item nº 7</li>
<li>Item nº 8</li>
<li>Item nº 9</li>
<li>Item Final</li>
</ul>
</div>

<svg width="0" height="0">
    <defs>
        <clipPath id="clipping4">
<polygon points="0 0, 20 20, 40 0, 60 20, 80 0, 100 20, 120 0, 140 20, 160 0, 180 20, 200 0, 220 20, 240 0, 255 0, 255 300, 240 300, 220 280, 200 300, 180 280, 160 300, 140 280, 120 300, 100 280, 80 300, 60 280, 40 300, 20 280, 0 300"/>
    </clipPath>
        </defs>
</svg>