使用文本扩展CSS形状

Question

我一直在努力让这个CSS形状与文本一起扩展，我不确定这是否可能，因为文本在CSS形状的上方(或前面)是position:absolute;。

这是我的小提琴：http://jsfiddle.net/W2SPd/10/

有什么建议吗？

Answer 1

我重新安排了你的CSS：Updated Fiddle

基本上，它包括删除position:absolute和固定宽度，而不是允许使用动态(使用display:inline-block)，并使用position:relative将文本移动到适当的位置。

Answer 2

这可以使用伪元素来实现，允许您只使用一个div元素：

​

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

修改span CSS样式，如下所示：

CSS

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

FIDDLE