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

I'm going to convert this PSD image to CSS. I've multiple h2s in multiple pages, so the inner text lenght and background-color may vary. Therefore the background should automatically adapt to "any" length.

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

So far, the markup is something like:

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

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

I may eventually wrap the inner text into a <span>, but keeping a semantic valid markup without any additional element would be ♥ly.

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

The inner text is rotated, but it's not mandatory. What i'm focusing on now is the skewed background.

内部文本被旋转,但它不是强制性的。我现在关注的是背景偏差。

I'm open-minded to any solution using scaled background pngs (eg. background-size:cover), pseudo-elements, canvas etc. But it must be modular.

我对使用缩放背景png(例如背景大小:封面),伪元素,画布等的任何解决方案持开放态度。但它必须是模块化的。

Thanks a lot for any suggestion.

非常感谢任何建议。

---

[update] A graphical example of what i'm looking for:

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

---

[important note] Behind the h2 there's an irregular pattern (not a "solid" color background)

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

7 个解决方案

#1

For anyone who's interested, here's my temporary solution: live demo.

对于任何有兴趣的人,这是我的临时解决方案:现场演示。

I used this sprite image:

我使用了这个精灵图片:

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>

(the .container div is only needed for variations)

(只有变量需要.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; }

Works on IE9+

适用于IE9 +

Unfortunately, background-size property doesn't support an "inherit" value, so the actual sprite's height must be set in the css :-( I'm still looking for a more efficient solution.

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

#2

With the combination of CSS shapes, positioning, :before and :after selectors I've managed to make the container expandable to any content. However, this approach only works in modern browsers and it seems that there's no proper solution without js. Also, the use of svg could be really handful in this case but again you're limited to the browser compatibility.

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

Here is the demo using pure CSS: http://jsfiddle.net/qaWKX/

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

EDIT

The use of svg turned out to be useless without an extra JS function. So I dropped this approach. However, the only proper solution relies on CSS3 but without the use of :before and :after selectors. My previous approach was relying on creating pseudo elements that hide both sides of the h3 title. Hiding is not enough when there's no solid color for the background.

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

With this logic I needed to have a background that will combine transparency and solid fill. The answer was on CSS3 linear-gradient background.

有了这个逻辑,我需要有一个结合透明度和实心填充的背景。答案是关于CSS3线性渐变背景。

In details: 1. I rotated the h3 title 2. I masked the top area with its container (top:-value or margin-top:-value) 3. I set 2 linear-gradient background images to each side

详细说明:1。我旋转了h3标题2.我用它的容器掩盖了顶部区域(顶部:-value或margin-top:-value)3。我为每一侧设置了2个线性渐变背景图像

Here's the demo: http://jsfiddle.net/P5gLE/1/

这是演示:http://jsfiddle.net/P5gLE/1/

#3

here is the html:

这是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>

and here is the css that makes the custom shape:

这是制作自定义形状的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;
}

#4

I don't think it is possible to do with just the h2. The problem occurs with the different angles of the skewed sides, meaning you need a 'container' for the skewing and transforms.

我认为只有h2才有可能。问题发生在倾斜边的不同角度,这意味着您需要一个“容器”来进行倾斜和变换。

Given your example, I came up with the following:

举个例子,我想出了以下内容:

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

As you will see, this is has a couple of maintenance problems:

正如您将看到的,这有几个维护问题:

• 'Magic Numbers' - these will need tweaking dependent on the skew + size you choose.

'Magic Numbers' - 这些需要根据您选择的偏斜+大小进行调整。

• Font rendering with the transform is somewhat worse.

变换的字体渲染有点糟糕。

Otherwise, it seems to work. The best solution outside of using pseudo-elements and CSS3 is likely to stick with plain old images for the background of each menu item.

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

#5

What about using CSS shapes? I haven't worked with them a ton, but it seems like a good place to start.

那么使用CSS形状呢?我没有和他们一起工作,但它似乎是一个好的开始。

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

#6

One easy solution I can think of is using 3 elements(I would use divs) for the three different bottom angles of the shape, having the left and right ones have a fixed size and the middle one simply scale with the text(headline) contained in it. Maybe not the most elegant solution, but it would definitely work. A downside is that you need a lot of images, especially if you want to have different coloured shapes. (I know of no way to colour a background image).

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

Though, if the space around the shape has a solid background colour, you could actually set the background colour of the 3 elements to the colour you want and have the actual images you use have the same colour as the background as negative space, being transparent where you want the actual shape.

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

Also, if you really do not want more elements than you need to, you can always use the :after and :before selectors to fake it.

此外,如果你真的不想要更多的元素,你可以随时使用:after和:before选择器来伪造它。

#7

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

The above code will make IE 5.5 through 8 run like a modern compliant browser, as far as styling/functionality in the page is concerned. This script is specifically made to address CSS/rendering errors in past versions of IE.

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

Here is documentation on the script: http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html

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

This is kind of an "IE Fallback", but a better way to approach the issue. Instead of making a ton of versions of the content to render the exact same way using different browsers, this simply forces modern compatibility upon early versions of IE.

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

I've used this script in the past to fix similar CSS rendering errors. This specific script above is to update IE5.5-8 up to 9. If you deliberately wish to upgrade IE5.5-7 up to 8 (no idea why you'd need to, but if you so desire), additional scripts at the URL below can do this.

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

Here is Google's page and into docs on it (includes the link above on this page as well) http://code.google.com/p/ie7-js/

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