I want to recreate the following image in cssa good looking wallpaper

I have created the triangles in 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>

The circile is in order to later be able to rotate the triangles.

the background image is a separate image from the ones in the triangles which is blurred using

filter: blur(5px);

My Problem is that I dont know how a good way to get the image inside the triangles while allowing adding shadows around them as well as keeping the image relative to the viewport (i.e. making sure the image matches the background image in the same position).

I have tried the following:

  • using a pattern as the background image - I couldnt figure out how to align the pattern relative to the viewport.
  • using mask - It didnt work as I expected (i.e. like a Photoshop mask) - if you know how to use mask for this let me know.
  • using clip-path - cant add the shadow around the triangles.

Some other things that would be nice about a solution:

  • every triangle being its own object, because I plan on putting other elements inside them.
  • being able to move and rotate them using transform (I think this wont be possible).
  • no use of javascript.
  • using only one unblurred image for memory reasons.
  • it should be possible to make it somewhat responsive, aka the images inside the triangles are in the right places regardless of the viewport size.

The solution doesnt have to work on old browsers or mobile devices.
I hope you can help me and thank you in advance :)

1 Answers

0
Teiem On

Never mind found it out.

Jk - here is my code: 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>

I didnt knew you could combine Clip-Path and Drop Shadow, this is ways simpler