相对于视口的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蒙版）-如果您知道如何使用蒙版，请告诉我。
• 使用剪切路径-无法在三角形周围添加阴影。

一些其他有关解决方案的东西：

• 每个三角形都是它自己的对象，因为我计划在其中放置其他元素。
• 能够使用transform移动和旋转它们（我认为这是不可能的。）
• 不使用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，这是更简单的方式