Image not getting inside CSS shape

Question

I'm doing a pentagon with css shapes and for some reason, the image is not staying inside. I've tried many things such a position absolute and moving the image inside the shape with the top and left properties but it does not work. It stays outside. Any ideas why this is happening?

Here's the css for my pentagon:

.pentagon {
    margin-top: 200px;
    position: relative;
    width: 250px;
    border-width: 130px 50px 0;
    border-style: solid;
    border-color: rgba(191, 191, 191, 0.6) transparent;
}
.pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -255px;
    left: -50px;
    border-width: 0 175px 125px;
    border-style: solid;
    border-color: transparent transparent rgba(191, 191, 191, 0.6);
}

And here's the CSS for the image:

.logo-sponsor{
    z-index: 1000;
    position: relative;
    width: 200px; 
    height: auto;
    margin: 0 auto;
    display: block;
}

Here's a fiddle with the demo.

Here's how it currently looks:

Answer 1

This is easy to change :

.logo-sponsor{
    z-index: 1000;
    position: absolute;
    top: -200px;
    left: 20px;

demo

But seriously, it's a bad idea to try to compose a logo like this : it's so much easier, and more powerful, to use an image. You could also use a character for this shape : ⬟