SVG фоновое изображение относительно области просмотра

Question

Я хочу воссоздать следующее изображение в css

Я создал треугольники в SVG

<svg id="trie2" height="300" width="300">
    <polygon fill="rgba(0, 255, 0, 0.5)" points="150,0 20,225 280,225"></polygon>
    <circle cx="150" cy="150" fill="transparent" r="150" stroke="black" stroke-dasharray="2, 2" stroke-width="1"></circle>
</svg>

Циркуляр предназначен для того, чтобы потом можно было вращать треугольники.

фоновое изображение является отдельным изображением от треугольников, которое размыто с помощью

filter: blur(5px);

Моя проблема в том, что я не знаю, как можно получить изображение внутри треугольников, добавив тени вокруг них, а также сохранить изображение относительно области просмотра (т. Е. Убедиться, что изображение соответствует фоновому изображению в том же самом виде. положение).

Я пробовал следующее:

• используя шаблон в качестве фонового изображения - я не мог понять, как выровнять шаблон относительно области просмотра.
• использование маски - это не сработало, как я ожидал (т.е. как маска Photoshop) - если вы знаете, как использовать маску для этого, дайте мне знать.
• используя clip-path - не могу добавить тень вокруг треугольников.

Некоторые другие вещи, которые были бы хороши в решении:

• каждый треугольник является своим собственным объектом, потому что я планирую поместить в них другие элементы.
• возможность перемещать и вращать их с помощью преобразования (я думаю, что это невозможно).
• без использования JavaScript.
• с использованием только одного не размытого изображения по причинам памяти.
• должна быть возможность сделать его несколько отзывчивым, иначе изображения внутри треугольников находятся в нужных местах независимо от размера области просмотра.

Решение не должно работать на старых браузерах или мобильных устройствах.
Я надеюсь, что вы можете помочь мне и заранее спасибо :))

Answer 1

Неважно, узнал это.

Jk - вот мой код: CSS:

.bgImage {
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-image: url("image.png");
    background-size: cover;
    background-attachment: fixed;
    filter: blur(5px)
}

#otherTrieWrap {
    filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.514));
}

#otherTrie {
    background-image: url("image.png");
    background-attachment: fixed;
    background-size: cover;

    clip-path: polygon(50.4% 13%, 0% 100%, 100% 100%);

    width: 1000px;
    height: 1000px;
}

HTML:

<div class="bgImage"></div>
<div id="otherTrieWrap">
    <div id="otherTrie"></div>
</div>

Я не знал, что вы можете комбинировать Clip-Path и Drop Shadow, это намного проще