css clip-path двигается с div

У меня есть код HTML

<div class='content'>
        <svg width='0' height='0'>
            <clipPath id='mask'>
                <polygon points='200 200,600 200,600 0,200 0'/>
            </clipPath>
        </svg>
        <div class='toMask'>
            <div class='item' id='yellowItem'>
                <img class='itemImage' src='itemImage.png'></img>
            </div>
            <div class='item' id='greenItem'>
                <img class='itemImage' src='itemImage.png'></img>
            </div>
            <div class='item' id='blueItem'>
                <img class='itemImage' src='itemImage.png'></img>
            </div>
            <div class='item' id='redItem'>
                <img class='itemImage' src='itemImage.png'></img>
            </div>
            <div class='item' id='blackItem'>
                <img class='itemImage' src='itemImage.png'></img>
            </div>
        </div>
    </div>

И код CSS

.toMask{
    position: absolute;
    height: 200px;
    left: 0px;
    width: max-content;
    clip-path: url('#mask');
}

Маска работает нормально(https://prnt.sc/u83hra), но если начинать изменять свойство left у toMask, маска не двигается, но получается вот это: https://prnt.sc/u83i2k а надо вот это: https://prnt.sc/u83ika Необходимый результат я получил просто изменяя значения <polygon points='200 200,600 200,600 0,200 0'/>, но такой костыль никуда не годится. Как получить нужный мне результат?