图像没有进入CSS形状

Question

我正在做一个带有CSS形状的五边形，出于某种原因，图像并没有留在里面。我已经尝试过许多这样的绝对位置，并使用顶部和左侧属性在图形内部移动图像，但它不起作用。它留在外面。任何想法为什么会这样？

这是我五角大楼的css：

.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);
}

这是图像的CSS：

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

这是一个带有演示的fiddle。

以下是目前的情况：

Answer 1

这很容易改变：

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

demo

但严重的是，尝试撰写这样的徽标是一个坏主意：使用图像更容易，也更强大。你也可以使用这个形状的角色：⬟