使用图像和CSS在上绘制功能区(Drawing a ribbon on a using images and CSS)

使用图像和CSS在上绘制功能区(Drawing a ribbon on a using images and CSS)

我正在制作一个带有div的功能区，在之前和之后：在psuedo-elements和3张图片之后 。 现在 ，我的主页位于我的主服务器上。 我得到：在图像工作之前，但我似乎无法得到：后图像对齐到右侧。 （请不要链接到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>

I'm looking to make a ribbon with a div, :before and :after psuedo-elements and 3 pictures. Here's the site now, as hosted on my home server. I got the :before image to work, but I can't seem to get the :after image to align to the right side. (please don't link to css-tricks, they use pure CSS, I'm after images!)

I think using relative placements might be a better alternative to floats, but I don't quite understand them.

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

EDIT: Updated CSS because I hate when people post temporary websites on 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>

最满意答案

一种选择是在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的盒子阴影，不是边框

One option is to use a negative right margin on div.hero-container::after .. I played around with it in Firebug and 15px seems about right. I'm not sure why the image isn't aligning to the right though.

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

Thats a box-shadow on .navbar-inner not a border