用文字扩展CSS形状

Question

我一直在努力让这个CSS形状用文本扩展，而我不确定是否甚至可能，因为文本是position:absolute;上面（或前面）的CSS形状。

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

修改如下跨度CSS样式：

CSS

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

FIDDLE