CSS inverted trapezium when width will differ

Question

I need to make the shape below, which will contain some text. Sometimes the text will be longer, sometimes shorter so I can use any fixed widths.

**********
 *      *
  ******

This the is code I have - I'm wondering if there's a way I can tag an image on to the beginning and the end of the span. The height won't change so that would probably be the best in terms of cross browser solutions...

<div class="trapizium_holder">
    <span id="trapizium"></span>
</div>

Answer 1

One Wrapper Only Needed (IE8+)

This fiddle demonstrates that only a single wrapper is needed. It uses a single pseudo-element to get the angles. The wrapper must either be floated or an inline-block. Here's the code:

HTML

<div class="trapizium">
   Test text
</div>

CSS

.trapizium {
    position: relative;
    float: left; /* wrap the text */
    clear: left; /* for demo */
    margin: 10px 20px; /* left/right margin will be diagonal width */
    /* needs some set height */
    font-size: 1em;
    line-height: 1em;
    padding: .2em 0;
    background-color: cyan;
}

.trapizium:before {
    content: '';
    height: 0;
    width: 100%;
    position: absolute;
    top: 0;
    left: -20px; /* stick out into margined area */
    z-index: -1; /* make it the background */
    border: 20px solid transparent; /* left/right diagonals */
    border-top: 1.4em solid cyan;
    border-bottom: 0px solid transparent;
}