html - 在 CSS 中自动调整倾斜背景(+ 图像？)

Question

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

到目前为止，标记是这样的:

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

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

内部文本已旋转，但这不是强制性的。我现在关注的是倾斜的背景。

我对使用缩放背景 png(例如 background-size:cover)、伪元素、 Canvas 等的任何解决方案持开放态度。但它必须是模块化的。

非常感谢任何建议。

---

[更新] 我正在寻找的图形示例:

---

[重要说明] 在 h2 后面有一个不规则图案(不是“纯色”背景)

Answer 1

对于任何感兴趣的人，这是我的临时解决方案: live demo .

我使用了这个 Sprite 图像:

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 中设置实际 Sprite 的高度 :-(我仍在寻找更有效的解决方案。