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?

Niet the Dark Absol · Accepted Answer · 2013-04-11 21:53:18Z

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.

answered Apr 11, 2013 at 21:53

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jbutler483 · Accepted Answer · 2015-03-26 09:50:37Z

0

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>

answered Mar 26, 2015 at 9:50

jbutler483

24.7k11 gold badges100 silver badges149 bronze badges

Comments

rajesh · Accepted Answer · 2015-03-26 14:09:33Z

0

Modify the span CSS style as below:

CSS

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

FIDDLE

edited Mar 26, 2015 at 14:09

answered Mar 26, 2015 at 9:54

rajesh

1,48511 silver badges23 bronze badges

Collectives™ on Stack Overflow

Expanding CSS shape with text

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related