0

我一直在努力尝试让这个 CSS 形状随文本扩展，但我不确定这是否可能，因为文本position:absolute;在 CSS 形状的上方（或更确切地说是在前面）。

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

有什么建议么？

4

3 回答 3

1

我重新排列了你的 CSS：更新的小提琴

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

于 2013-04-11T21:53:18.140 回答
0

修改 span CSS 样式如下：

CSS

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

小提琴

于 2015-03-26T09:54:48.100 回答
0

这可以通过使用伪元素来实现，允许您只需要使用单个 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>

于 2015-03-26T09:50:37.253 回答