我将把这个PSD图像转换成CSS。在多个页面中有多个h2，因此内部文本长度和背景颜色可能会有所不同。因此，背景应该自动适应“任何”长度。
到目前为止，标记类似于：
<h2 class="sub-heading lab-heading">Laboratori</h2>
我可能最终会将内部文本包装到一个<span>中，但保持语义有效的标记而不添加任何额外元素会更好。
内部文本被旋转，但这并非强制性要求。我现在关注的是倾斜的背景。
我对使用缩放的背景PNG（例如background-size：cover）、伪元素、画布等任何解决方案都持开放态度。但它必须是模块化的。
非常感谢任何建议。
[更新] 我正在寻找的图形示例：
[重要说明] 在h2后面有一个不规则的图案（不是“实心”颜色背景）
对于任何感兴趣的人，这是我的临时解决方案：演示。
我使用了这个精灵图片：
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属性不支持"inherit"值，所以实际精灵的高度必须在CSS中设置 :-(
我仍在寻找更有效的解决方案。
svg作为background-image，并将background-size设置为100％。您的svg尺寸越大，在调整大小时质量就会更好。而且不要忘记它是矢量图形，所以浏览器的svg引擎可以决定如何加载svg背景。这里有一个演示：http://jsfiddle.net/sSaBJ/1/注意：svg文件只有481字节！ - otinanaibackground-size: 51% 100%;。此外，我会选择使用 inline-block 而不是 display:table 和 table-cell（在各种浏览器中更一致）。查看我对你的编辑的版本。不幸的是，ie9 不支持 css 渐变 :-( 无论如何，做得很好！ - Gionahere is the 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;
}
inline-block 设置为 .scewed-shape 而无需使用 JavaScript 来实现相同的效果... 演示。这是一个好的起点，但我的演示中形状更加复杂。哦，您只需要为 transform 添加 -webkit 和 -ms 前缀即可;-) - Giona我认为仅使用h2是不可能实现的。问题在于倾斜边缘的不同角度，这意味着您需要一个进行倾斜和变换的“容器”。
根据您的示例，我想到了以下内容：
正如您所看到的，这里有一些维护问题：
除此之外，它似乎是有效的。在不使用伪元素和 CSS3 的情况下，最好的解决方案可能是为每个菜单项的背景坚持使用普通的图像。
canvas或SVG（如果可能的话）来创建和显示背景，以及可能的文本。不确定这会对透明度产生什么影响。 - Hux<!--[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（不知道为什么需要，但如果您愿意），则可以在下面的URL中使用其他脚本来完成。
这是Google页面和相关文档（也包括上面的链接） http://code.google.com/p/ie7-js/
使用CSS形状怎么样？虽然我没有大量使用过它们，但这似乎是一个不错的起点。
我能想到的一个简单解决方案是使用三个元素（我会使用div）来表示形状的三个不同底角，左右两个元素具有固定大小，中间的元素只需根据其中包含的文本（标题）进行缩放。也许不是最优雅的解决方案，但肯定有效。一个缺点是你需要很多图片，特别是如果你想要不同颜色的形状。（我不知道如何给背景图片上色）。
不过，如果形状周围的空间有一个纯色背景，你实际上可以将3个元素的背景颜色设置为你想要的颜色，并且你使用的实际图像与背景颜色相同作为负空间，在你想要实际形状的地方是透明的。
此外，如果你真的不想使用比所需更多的元素，你总是可以使用:after和:before选择器来伪造它。