自动调整大小在CSS背景偏斜（+图像？）(Auto-resizing skewed backgrou

我要这个PSD图像转换为CSS。 我在多页多硫化氢，所以内部文本lenght和背景颜色可能会有所不同。 因此，背景应自动适应“任何”的长度。

到目前为止，该标记是一样的东西：

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

我可能最终包裹所述内文成<span> ，但保持一个语义有效的标记没有任何额外的元件将是♥LY。

内文是旋转的，但它不是强制性的。 什么我专注于现在是歪斜的背景。

我虚心地使用缩放背景PNG格式的任何解决方案（例如，背景大小：盖），伪元素，帆布等，但它必须是模块化的。

非常感谢任何建议。

---

[更新]什么，我正在寻找一个图形化的例子：

---

[重要音符]的H 2的后面都有不规则图案 （不是“固体”色彩背景）

Answer 1:

对于任何人谁是有兴趣的，这里是我的临时解决办法： 现场演示 。

我用这个精灵图片：

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/

编辑

采用svg竟然是不需要额外的JS功能形同虚设。 所以我放弃了这种做法。 然而，唯一正确的解决方案依赖于CSS3但没有使用的:before和:after选择。 我以前的做法是依靠创建隐藏的两侧伪元素h3称号。 隐藏是不够的时候，那里已经为背景没有纯色。

有了这个逻辑我需要有一个background ，将结合透明度和实心填充。 答案是对CSS3 linear-gradient background 。

在详细信息：1.我旋转的h3标题2.我掩蔽其容器的顶部区域（ 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/

正如你所看到的，这是有一对夫妇的维护问题：

• “幻数” - 这些都需要调整取决于您选择的偏移+大小。
• 字体渲染与变换略差。

否则，它似乎工作。 使用伪元素和CSS3之外最好的解决方案很可能坚持使用普通的旧图像每个菜单项的背景。

Answer 5:

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

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

Answer 6:

一个简单的解决方案，我能想到使用3个元素（我想使用的div）的形状的三个不同的底角，其具有左和右那些具有固定的大小和中间的一个简单的与该文本（标题）比例的含有在里面。 也许不是最完美的解决方案，但它肯定会工作。 不利的一面是，你需要大量的图片，特别是如果你想有不同颜色的形状。 （据我所知，没有办法颜色的背景图像）。

不过，如果形状周围的空间有一个坚实的背景颜色，你实际上可以设置3个元素到你想要的颜色的背景颜色，并有使用具有相同的颜色作为背景为负空间，是透明的实际图像要将实际形状。

此外，如果你真的不想要更多的元素比你需要，你可以随时使用：后：选择之前，捏造事实。

Answer 7:

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

上面的代码将通过8像现代兼容的浏览器运行使IE 5.5，只要在页面样式/功能有关。 这个脚本是专门为解决IE中的以前版本的CSS /渲染错误。

下面是该脚本文件： http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html

这是种“IE后退”，但更好的办法来处理这一问题。 而不是使一吨的内容来呈现使用不同的浏览器完全相同的方式的版本，这只是强迫在IE的早期版本兼容的现代化。

我用这个脚本在过去解决类似CSS渲染错误。 上述这种特定的脚本来更新IE5.5-8高达9.如果你刻意想了升级IE5.5-7 8（不知道为什么你需要的，但如果你愿意的话），附加在脚本下面的网址可以做到这一点。

这是谷歌的网页，并为它的文档（包括上面的这个页面上的链接以及） http://code.google.com/p/ie7-js/

文章来源: Auto-resizing skewed background in CSS (+ images?)