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

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

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

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

实验室

我可能最终会将内部文本包装成一个

，但是保留一个语义有效的标记而不添加任何额外的元素将是非常困难的♥很好

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

我对任何使用缩放背景PNG（例如背景大小：封面）、伪元素、画布等的解决方案持开放态度，但它必须是模块化的

非常感谢你的建议

---

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

---

---

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

使用CSS形状怎么样？我没有和他们一起工作过很多次，但这似乎是一个好的开始

---

我能想到的一个简单的解决方案是对形状的三个不同底角使用3个元素（我会使用div），左右两个元素的大小是固定的，中间一个元素只是根据其中包含的文本（标题）进行缩放。也许不是最优雅的解决方案，但它肯定会奏效。缺点是你需要很多图像，特别是如果你想有不同颜色的形状。（我不知道如何给背景图像上色）

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

此外，如果您真的不需要比需要更多的元素，您可以始终使用：after和：before选择器来伪造它。

以下是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>

---

我认为不可能只使用

h2

。问题发生在倾斜边的不同角度，这意味着您需要一个用于倾斜和变换的“容器”

以你为例，我得出以下结论：

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

• “神奇数字”-这些数字需要根据您选择的倾斜+大小进行调整
• 使用转换的字体呈现效果稍差

---

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

通过CSS形状、定位、

：在

之前和

：在

选择器之后，我已设法使容器可扩展到任何内容。然而，这种方法只适用于现代浏览器，似乎没有js就没有合适的解决方案。此外，在这种情况下，svg的使用可能非常少，但您也仅限于浏览器兼容性

以下是使用纯CSS的演示：

编辑

如果没有额外的JS函数，

svg

的使用结果是无用的。所以我放弃了这种方法。但是，唯一合适的解决方案依赖于CSS3，但不使用

：before

和

：after

选择器。我以前的方法依赖于创建隐藏

h3

标题两侧的伪元素。当背景没有纯色时，隐藏是不够的

有了这个逻辑，我需要有一个结合了透明度和实体填充的

背景。答案是CSS3
线性梯度
背景

详情如下：
1.我旋转了
h3
标题
2.我用容器遮住了顶部区域（
top:-value
或
margin-top:-value
）
3.我在每侧设置了2个
线性渐变
背景图像

这里是演示：
对于任何感兴趣的人，这里是我的临时解决方案：

我使用了这个精灵图像：


html:

在IE9上工作+

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

<!--[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/呈现错误

以下是有关脚本的文档：

这是一种“IE回退”，但却是解决这个问题的更好方法。与其使用不同的浏览器制作大量版本的内容以完全相同的方式呈现，不如将现代兼容性强加于早期版本的IE

我以前使用过这个脚本来修复类似的CSS渲染错误。上面这个特定的脚本是将IE5.5-8更新到9。如果您有意将IE5.5-7升级到8（不知道为什么需要，但如果您愿意），下面URL中的其他脚本可以做到这一点

这是谷歌的页面和它上面的文档（包括上面的链接）
+1问一个好问题……我想不出来。CSS3形状不能完全完成任务，不能完全按照您的要求完成。我感觉这必须用javascript完成。您需要支持哪些浏览器？@dave IE9+，我将为IE8添加一个简单的后备方法。我看不到以不可恢复的模式作为背景来实现这一点的方法。是吗你还想用纯色的背景色和不带fff的切边来实现它吗？嗯，谢谢，但不谢谢@dave，这就是米格的答案…这就是我在上面看到的，但这不是一个非常理想的解决方案，定位文本会很困难。CSS shap
<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>

.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; }

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