css - 使用图像和 CSS 在 上绘制丝带

Question

我想用 div、:before 和 :after 伪元素和 3 pictures 制作丝带.我让 :before 图像工作，但我似乎无法让 :after 图像与右侧对齐。 (请 don't link to css-tricks ，他们使用纯 CSS，我追求的是图像!)

我认为使用相对位置可能比 float 更好，但我不太理解它们。

旁白:有谁知道是什么导致了 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 似乎是正确的。不过，我不确定为什么图像没有右对齐。

旁白:有人知道是什么导致了 navbar-inner 底部和侧面的边框吗？

那是 .navbar-inner 上的框阴影，不是边框