CSS ribbon-like header

Question

I'm trying to get a ribbon-like banner effect for a header: enter image description here

My markup is this:

<header>
    <div id="logo">
        <img src="">
    </div>
</header>

I was thinking I could use pseudo :before and :after elements on the <img>, creating extra white space above and below the image to fake the extended `div:

#logo-wrap img:after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 100px;
    height: 100px;
    background-color: #000;
}

And then another :before and :afterpseudo elements for the "shadow-fold".

My problem is: if I end up doing it like this, I'll have to insert another div between #logoand <img> in order to add another pair of :before and :after pseudo elements for the bottom "shadow-fold" and I think I'm having problems using the pseudo elements on the <img> element (nothing is appearing).

Can you shed some light and guide me on the right direction, pls? Perhaps, there is a simple way to just "shrink" the <header>?

EDIT

So, :before and :after can't be used with <img>. Thank you for the info :)

What I would like to know is if there is another way to achieve what I desire instead of wrap-wrap-wrap? :P

i.e: is there a way to make the #logo be bigger than <header> despite being its child and its height being the same (since the <header> has always the same height as the <img>)?

Thanks

I set up a [codepen](http://codepen.io/himmel/pen/MwQVVV) with your HTML/CSS, can you link an image to demonstrate the problem that you're having? — Himmel, Jul 02 '15 at 16:02
Yes, when you start editing it automatically forks it into a new codepen. Just make sure to share the link of the fork after you do so. — Himmel, Jul 02 '15 at 16:06
Images don't support pseudo elements. You will need to wrap it in a shrink-wrapped div. — Paulie_D, Jul 02 '15 at 16:07
possible duplicate of [Does :before not work on img elements?](http://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements) — Etheryte, Jul 02 '15 at 16:08
@Dmitriy, so `:before` and `:after` don't work with element? @Himmel, [here it is](http://codepen.io/anon/pen/YXeavP) — PedroMendes, Jul 02 '15 at 16:08
Instead of a wrapper, you could get rid of the `img` tag, replace it with a `div` and give it a `background-image` and `height` and `width` — Jamie Barker, Jul 02 '15 at 16:22

Joseph Marikle · Accepted Answer · 2015-07-02T16:21:08.853

I think you're on the right track. I would use borders, but I would make your pseudo-elements be behind the logo like so:

body,html {margin: 0; padding: 0;}

header {
    background: #eee;
    text-align: center;
    margin: 1em 0;
}

#logo {
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: -0.5em 0;
}

#logo:before, #logo:after {
    content: '';
    position: absolute;
    width: 100%;
    left: -0.25em;
    border: 0 solid transparent;
    border-width: 0.5em 0.25em;
    color: #aaa; /* set so we only have to have the border color in one place.
                    if not specified, border color is the same as the text
                    color. */
}

#logo:before {
    border-top: none;
    border-bottom-color: initial;
    top: 0;
}

#logo:after {
    border-bottom: none;
    border-top-color: initial;
    bottom: 0;
}

#logo img {
    position: relative;
    display:block;
    z-index: 1;
}

<header>
    <div id="logo">
        <img src="//placehold.it/300x100?text=LOGO"/>
    </div>
</header>

The concept is that the pseudo-elements are 100% width of the logo with a little bit extra (determined by the border attributes). Then you use both left and right borders simultaneously. There's a few other tricks in that code that help simplify it, but the general idea is to let your pseudo-elements peek out from behind the logo itself.

perfect! exactly what I was looking for! and you didn't even have to wrap it and wrap it and wrap it — PedroMendes, Jul 02 '15 at 16:27

CSS ribbon-like header

1 Answers1