Как я могу использовать позицию маски, чтобы переместить вырез вправо? ⇐ CSS

[Anonymous]

Сейчас я пытаюсь создать динамический слайдер в PHP/CSS. Моя цель — позволить пользователю загружать любой SVG и использовать его в качестве фигуры для вырезания части фона.
Все работает так, как мне хотелось бы, но почему-то форма работает не выравниваться вправо. Я знаю, что маска покрывает все изображение, поэтому маска-позиция: вверху справа; здесь не работает, но я не знаю другого варианта управления положением маски. Я подумал о том, чтобы добавить вокруг него еще один элемент div и снова вырезать маску, но если я попробую это сделать, то потеряю градиент. Есть ли у кого-нибудь идеи, как это правильно настроить?

Код: Выделить всё

#homeSlider {
font-family: 'Roboto';
}

.slider-element {
position: relative;
}

.slider-element .slider-mask {
position: absolute;
z-index: 200;
width: 100%;
height: 100%;
mask-composite: exclude;
mask-position: right top;
mask-repeat: no-repeat;
}

.slider-element img {
position: relative;
z-index: 100;
display: block;
width: 100%;
height: auto;
}

.slider-element .slider-element-content {
position: absolute;
z-index: 300;
left: 50%;
transform: translateX(-50%);
bottom: 10%;
color: white;
width: 100%;
max-width: 1000px;
}
.slider-element .slider-element-content .teaser {
font-size: 20px;
}
.slider-element .slider-element-content h1 {
color: white;
}
.slider-element .slider-element-content .slider-button {
display: inline-block;
padding: 15px 50px;
border-radius: 9999px;
background: transparent;
border: 3px solid #AF9D6A;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
font-size: 22px;
line-height: 1;
font-weight: 700;
color: white;
transition: all 200ms linear 0s;
}
.slider-element .slider-element-content .slider-button:hover {
color: #AF9D6A;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.25);
}

Код: Выделить всё

Lorem Ipsum

Lorem Ipsum dolor sit amet

[url=#]
read more
[/url]

[img]https://picsum.photos/1280/846[/img]

Подробнее здесь: https://stackoverflow.com/questions/783 ... -the-right