在一张纸上画一条丝带<div>使用图像和 CSS

Question

我正在寻找一个带有 div 的丝带，:before 和 :after 伪元素和3 张图片。 我得到了 :before 图像，但我似乎无法让 :after 图像与右侧对齐。 （请不要链接到 css-tricks ，他们使用纯 CSS，我在寻找图像！）

我认为使用相对位置可能是浮动的更好选择，但我不太了解它们。

旁白：有谁知道是什么导致了 navbar-inner 底部和侧面周围的边界？

编辑：更新了 CSS，因为我讨厌人们在 SO 上发布临时网站：

div.hero-unit {
    background: url(../img/ribbon-center.png) repeat-x;
    border-radius: 0;
    margin: 0 -15px;
    padding: 30px;
    float: left;
}

div.hero-container:before {
    content: url(../img/ribbon-fold-left.png);
    float: left;
    margin-left: -30px + -48px + 15px; /* - Padding size (30px) - image width (48px) + margin (15px) */
}


div.hero-container:after {
    content: url(../img/ribbon-fold-right.png);
    background: transparent;
    float: right;
    margin-right: -48px + -15px; /* - image-width (48px) - margin (15px) */
}

HTML：

<div class="hero-container">
    <div class="hero-unit">content</div>
</div>

Answer 1

一种选择是在div.hero-container::after上使用负的右边距。我在 Firebug 中使用它，15px 似乎是正确的。 我不确定为什么图像没有正确对齐。

Aside: does anyone know what is causing the border around the bottom and sides of navbar-inner?

那是.navbar-inner上的 box-shadow 而不是边框