1

现在我们有一个网页，一个页面上有一堆链接部分。每个部分都有一个像这样的标题：

在此处输入图像描述

这个标题背景实际上是两个图像。第一个只是一个矩形，第二个有斜边。在查看此解决方案时，我想知道是否可以使用 CSS 而不是图像来解决此问题。虽然我不是 CSS 专家，但我确实查看了一些示例，并且能够获得类似的工作。但是，当我尝试将文本放在背景之上时，它最终会出现在颜色之上而不是在其中。我拥有的 CSS 也有一个固定的大小，这并不理想。我宁愿指定可用区域的百分比并让它填充颜色。

这是我一直在使用的代码：

<STYLE type="text/css">
  .mini_banner 
  {
     display:inline;
     border-bottom:30px solid blue; 
     border-left:0px solid transparent;
     border-right:30px solid transparent;
  }
</STYLE>

我想将此应用于表格中的单元格。我也不想破坏与现代浏览器的兼容性。我的“客户”（主要是内部人员）将主要使用 IE8 或更高版本，但如果我能提供帮助，我不想限制自己。

那么首先，这可能吗？其次，我将如何做到这一点？第三，有没有办法让它在规模上相对而不是固定？

4

2 回答 2

3

我会说，如果您恢复使用单个背景图像，那么您将不会感到头疼 - 在这种情况下，是带有缺口的白色图像（具有 alpha 透明度的 PNG-24）。让它比你认为你需要的大大约 200%，然后做这样的事情：

.minibanner {
   background: blue url(..images/notch.png) no-repeat middle right;
   font-size: 1.5em;
 }

原因是依赖边框大小可能会导致跨浏览器的一些奇怪现象，如果任何元素运行到两行肯定会看起来很奇怪。

如果您将缺口图像放大 200-300%，但将其垂直对齐在背景的中间，并且确实增加了字体大小，则框会变大，但您的白色缺口会随之增长。

更新：

我能看到的唯一其他方法是在您的文本之后添加一个非语义元素，例如 a 或类似的东西：

<div>
    <p>Hello text</p>
    <span></span>
</div>

然后在你的 CSS 中：

    p { 
        background: blue; 
        color: white;
        float: left;
        padding: 0 20px;
        height: 50px;
        margin:0;
        line-height: 50px;
        }
    span {
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-bottom: 0px solid transparent;
        display: inline-block;
        border-left: 50px solid blue;
    }

请参阅此JSFiddle。

该形状基于本教程关于 CSS 三角形。现在，我只在基于 webkit 的浏览器上尝试过这个，它可以工作。每次要更改字体大小时都必须调整高度，这是一个缺点。

于 2012-04-13T13:33:08.940 回答
2

我让它在没有额外跨度的情况下工作：jsFiddle

.mini_banner
{
    width:18em; height:1.5em;
    color:white; font-weight:bold; padding-left:0.5em;
    margin-bottom:.5em;
}
.mini_banner:before {
    display:inline-block; content:''; overflow:hidden;
    width:17em; height:0;
    margin-bottom:-1.5em; margin-left:-.5em;
    border-bottom:1.5em solid blue;
    border-right:1.5em solid transparent;
}

在 FF、Safari、Opera 和 IE 中测试。（适用于 IE8，但不适用于 IE7）

于 2012-04-13T18:03:13.270 回答