0

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

2
  • 1
    я понять не могу что должно получиться но сделайте так как у меня в песочнице codepen.io/topicstarter/pen/PoNjypB 30 авг 2020 в 8:51
  • спасибо, помогло, только двигать надо yellowItem
    – cafeed
    31 авг 2020 в 9:01

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.