自动调整CSS中的倾斜背景（+图像？）

Question

我要把这个PSD图像转换成CSS。我在多个页面中有多个h2，因此内部文本长度和背景颜色可能会有所不同。因此，背景应自动适应“任何”长度。

到目前为止，标记类似于：

<h2 class="sub-heading lab-heading">Laboratori</h2>

我最终可能会将内部文本包装成<span>，但保留一个没有任何其他元素的语义有效标记将是♥ly。

内部文本已旋转，但并非强制性。我现在关注的是背景偏差。

我对使用缩放背景png（例如background-size：cover），伪元素，画布等的任何解决方案持开放态度。但它必须是模块化的。

非常感谢任何建议。

---

[update]我正在寻找的图形示例：

---

[重要提示]在h2后面有一个不规则图案（不是“纯色”背景）

Answer 1

对于任何有兴趣的人，这是我的临时解决方案： live demo 。

我使用了这个精灵图像：

HTML：

<div class="container">
<h2 class="sub-heading"><span class="sub-heading-txt">Short title</span></h2>
</div>
<div class="container">
<h2 class="sub-heading"><span class="sub-heading-txt">A bit longer title</span></h2>
</div>
<div class="container">
<h2 class="sub-heading"><span class="sub-heading-txt">A damn long title is here!</span></h2>
</div>

（.container div仅用于变体）

的CSS：

.sub-heading, .sub-heading:after, .sub-heading:before {
    background:url(tha-sprite-url.png) 0 0 no-repeat;
}

.sub-heading {
    position:relative;
    display:inline-block; clear:both;
    margin-left:31px; padding:0 18px 10px 0;
    font-size:25px; font-weight:normal; color:#FFF; line-height:47px;
    background-position:0 -75px;
    background-size:100% 282px; /* the sprite's height */
}

.sub-heading:before, .sub-heading:after { content:" "; position:absolute; top:0; }
.sub-heading:before { left:-31px; width:31px; height:57px; }
.sub-heading:after { right:-12px; width:12px; height:42px; background-position:-150px 0; }

.sub-heading-txt {
    display:block;
    -webkit-transform:rotate(-2deg); -ms-transform:rotate(-2deg); transform:rotate(-2deg);
}

/* variations */
.container { margin-bottom:10px; }
.container:nth-child(3n+2) .sub-heading { background-position:0 -150px; }
.container:nth-child(3n+2) .sub-heading:before { background-position:-50px 0; }
.container:nth-child(3n+2) .sub-heading:after { background-position:-175px 0; }
.container:nth-child(3n+3) .sub-heading { background-position:0 -225px; }
.container:nth-child(3n+3) .sub-heading:before { background-position:-100px 0; }
.container:nth-child(3n+3) .sub-heading:after { background-position:-200px 0; }

适用于IE9 +

不幸的是，background-size属性不支持“继承”值，因此实际的精灵高度必须在css中设置:-( 我仍在寻找更有效的解决方案。

Answer 2

通过CSS形状，定位，:before和:after选择器的组合，我设法使容器可扩展为任何内容。但是，这种方法只适用于现代浏览器，似乎没有js没有适当的解决方案。此外，在这种情况下使用svg可能非常少，但同样您只能使用浏览器兼容性。

以下是使用纯CSS的演示：http://jsfiddle.net/qaWKX/

修改

如果没有额外的JS功能，svg的使用就变得无用了。所以我放弃了这种方法。但是，唯一合适的解决方案依赖于CSS3，但不使用:before和:after选择器。我以前的方法依赖于创建隐藏h3标题两边的伪元素。当背景没有纯色时，隐藏是不够的。

有了这个逻辑，我需要一个background来组合透明度和实体填充。答案是关于CSS3 linear-gradient background。

详情：  1.我旋转了h3标题  我用容器（top:-value或margin-top:-value）掩盖了顶部区域。  3.我为每一方设置了2 linear-gradient个背景图像

以下是演示：http://jsfiddle.net/P5gLE/1/

Answer 3

这是html：

<br>
<div class="scewed-shape">
    <div class="text-align">here is a very long text adsadsad</div>
</div>
<br>
<br>
<div class="scewed-shape">
    <div class="text-align">this one is shorter</div>
</div>

以下是制作自定义形状的css：

.scewed-shape {
    display:inline-block;
    -webkit-transform: perspective(500px) rotateY(34deg);
    -ms-transform: perspective(500px) rotateY(34deg);
    left: -25px;
    height: 0;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}
.scewed-shape .text-align {
    position: relative;
    top: -25px;
}

Answer 4

我认为只有h2可以做到这一点。问题出现在倾斜边的不同角度，这意味着您需要一个“容器”来进行倾斜和变换。

根据你的例子，我想出了以下内容：

http://jsfiddle.net/Cbx2q/1/

正如您将看到的，这有几个维护问题：

• 'Magic Numbers' - 这些需要调整，具体取决于你选择的偏斜+大小。
• 使用转换进行字体渲染会更糟糕。

否则，似乎有效。使用伪元素和CSS3之外的最佳解决方案可能会使用普通旧图像作为每个菜单项的背景。

Answer 5

使用CSS形状怎么样？我没有和他们一起工作，但它似乎是一个很好的起点。

http://css-tricks.com/examples/ShapesOfCSS/

Answer 6

我能想到的一个简单的解决方案是使用3个元素（我会使用div）来表示形状的三个不同底角，左边和右边有一个固定的尺寸，中间的一个只是用文字缩放（标题中包含的内容。也许不是最优雅的解决方案，但它绝对有效。缺点是你需要大量的图像，特别是如果你想要有不同的彩色形状。 （我知道无法为背景图像着色）。

但是，如果形状周围的空间具有纯色背景，您实际上可以将3个元素的背景颜色设置为您想要的颜色，并使您使用的实际图像与背景颜色相同，为负空间，在你想要实际形状的地方透明。

另外，如果你真的不想要比你需要更多的元素，你总是可以使用：after和：before选择器来伪造它。

Answer 7

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

上述代码将使IE 5.5到8像现代兼容的浏览器一样运行，就页面中的样式/功能而言。此脚本专门用于解决以前版本的IE中的CSS /呈现错误。

以下是该脚本的文档： http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html

这是一种“IE后备”，但更好的方法来解决这个问题。它不是使用大量版本的内容来使用不同的浏览器以完全相同的方式呈现，而是简单地强制在早期版本的IE上进行现代兼容。

我过去曾使用过这个脚本来修复类似的CSS渲染错误。上面这个特定的脚本是将IE5.5-8更新到9.如果你故意希望将IE5.5-7升级到8（不知道为什么你需要，但如果你愿意的话），还需要附加脚本下面的网址可以做到这一点。

以下是Google的页面及其中的文档（包括此页面上方的链接） http://code.google.com/p/ie7-js/