使用文本扩展CSS形状

Question

我一直在努力尝试使用文本扩展这个CSS形状，我不确定它是否可能，因为文本在CSS形状的上方（或前面）position:absolute;。{ / p>

这是我的小提琴： 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