Question

For a site I’m making I have to create the following block.

I have the following CSS that creates a white box with rounded edges and a shadow when used with the HTML below.

<style type="text/css">
    .stripeblock {
        width: 310px;
        border-radius: 12px;
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 8px 6px -6px black;
    }
</style>

<div class="stripeblock">
    <h1>Just some title</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to...</p>
</div>

The only thing missing is the green horizontal stripe, I tried a couple of things but can’t get it in properly.
I would like it to be included via the CSS and not be a seperate element within the div.
Is this possible?

Answer 1

You can absolutely do this, without any extra images or markup.

Just use the ‘:before’ pseudo element to style a block and place it where it needs to be.

Try this:

.stripeblock:before {
    background: #c8d300;
    content: "";
    display: block;
    height: 7px;
    position: absolute;
    top:0;
    left: 20px;
    width: 125px;   
}

And make sure you add position: relative; to your .stribeblock to the :before; block is positioned correctly.

.stribeblock {
    position: relative;
}

Check out the results, here: http://jsfiddle.net/qVFeT/