У меня есть код 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'/>
, но такой костыль никуда не годится. Как получить нужный мне результат?