12

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

倾斜的背景演示

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

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

我最终可能会将内部文本包装成一个<span>，但是保持语义有效的标记没有任何额外的元素将是♥ly。

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

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

非常感谢您的任何建议。

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

我不是图形演示

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

4

7 回答 7

5

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

我使用了这个精灵图像：

倾斜的 bg 精灵

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

于 2013-02-14T13:56:00.417 回答
3

通过结合 CSS 形状、定位:before和:after选择器，我设法使容器可扩展到任何内容。但是，这种方法只适用于现代浏览器，似乎没有 js 就没有合适的解决方案。此外，在这种情况下，svg 的使用可能非常少，但您再次受限于浏览器兼容性。

这是使用纯 CSS 的演示：http: //jsfiddle.net/qaWKX/

编辑

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

有了这个逻辑，我需要一个background将透明度和实心填充结合起来的东西。答案在 CSS3 上linear-gradient background。

详细说明： 1. 我旋转了标题 2. 我用它的容器（或）h3遮住了顶部区域3. 我在每一侧设置了 2 个背景图像top:-valuemargin-top:-valuelinear-gradient

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

于 2013-02-14T11:51:51.930 回答
1

我认为不可能只使用h2. 倾斜边的不同角度会出现问题，这意味着您需要一个用于倾斜和变换的“容器”。

鉴于你的例子，我想出了以下内容：

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

如您所见，这有几个维护问题：

  • “魔术数字” - 这些将需要根据您选择的倾斜 + 大小进行调整。
  • 使用变换的字体渲染有些糟糕。

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

于 2013-02-13T22:57:45.700 回答
1

这是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;
}
于 2013-02-08T21:05:29.940 回答
0

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

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

于 2013-02-05T19:14:31.927 回答
0

我能想到的一个简单的解决方案是使用 3 个元素（我会使用 div）来表示形状的三个不同的底部角度，让左右的具有固定的大小，而中间的元素只是与包含的文本（标题）一起缩放在里面。也许不是最优雅的解决方案，但它肯定会奏效。缺点是您需要大量图像，特别是如果您想要不同颜色的形状。（我知道没有办法给背景图像上色）。

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

另外，如果你真的不想要比你需要的更多的元素，你总是可以使用 :after 和 :before 选择器来伪造它。

于 2013-02-05T21:26:16.913 回答
0 
<!--[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/

于 2013-02-14T21:54:52.903 回答