Background Masking CSS Only Technique on Facebook Profile preview Popover

Question

So Facebook displays a popover showing a profile-preview of the person on whose name you're hovering. If you have problems reproducing this, because the popover always appears on top of the name, just scroll down a little, leaving it not enough room to be shown above the name. Here's an example:

https://i.sstatic.net/bD1lk.jpg
(apparantly i need 10 posts for images.. sorry!)

There's this little triangle showing its part of the respective background image. What technique was used to achieve this? I haven't been able to come up with a solution, yet. Since it doesn't seem to be css3 masking and generating a single image for each picture would be kinda overkill...

I hope you can help me out here.. Either i'm just using the wrong search queries or the solution is deliberately hiding from me!

Thanks in advance! Cheers

// edit:

I have played around a little more and found out, that the space around the triangle definitely is transparent as seen in the following picture:

https://i.sstatic.net/7jBIj.png

This means it's not the technique shown by kalley (which is a really nice start, tough!).

Answer 1

You could try something like this: http://jsfiddle.net/Z6fYj/

It requires that you know the background color that it's going to be on top of, but you can see the effect.

.img {
    background: url(...) no-repeat;
    background-size: 500px auto;
    /* -10px relates to the top position of :before */
    background-position: 0 -10px;
    width: 500px;
    height: 372px;
    position: relative;
    margin-top: 20px;
}
.img:before {
    background: url(...) no-repeat;
    background-size: 500px auto;
    /* -40px is the opposite of the left property */
    background-position: -40px 0;
    position: absolute;
    width: 0;
    top: -10px;
    left: 40px;
    content: '';
    border-bottom: 10px solid transparent;
    border-right: 10px solid #fff;
    border-left: 10px solid #fff;
}

I'm not sure if that's exactly how facebook is doing it (can't seem to trigger the mouseover manually...), but this can probably give you a start.