Expanding CSS shape with text

Question

I've been working on trying to get this CSS shape to expand with text and I am not sure if it's even possible since the text is position:absolute; above (or in front rather) of the CSS shape.

Here's my fiddle: http://jsfiddle.net/W2SPd/10/

Any suggestions?

Answer 1

I've rearranged your CSS: Updated Fiddle

Basically it involves removing the position:absolute and fixed width, and instead allowing a dynamic with (using display:inline-block ) and moving the text into place with position:relative instead.

Answer 2

This could be achieved used pseudo elements, allowing you to only have to use a single div element:

 div{ margin-left:50px; margin-right:50px; background:tomato; position:relative; height:50px; display:inline-block; } div:before, div:after{ content:""; position:absolute; top:0; height:100%; border-top:50px solid tomato; } div:before{ left:-50px; border-left:50px solid transparent; } div:after{ right:-50px; border-right:50px solid transparent; } 

 <div>This is text</div> 

Answer 3

Modify the span CSS style as below:

CSS

h1 span {
  position: absolute;
  top: -78px;
  width: 111px;
}

FIDDLE