Question

现在我们有一个网页，在一个页面上有一堆链接部分。每个部分都有一个标题，如下所示：

enter image description here

此标题背景实际上是两个图像。第一个是矩形，第二个是斜面。当我看到这个解决方案时，我想知道我是否可以用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或更高版本，但如果我能提供帮助，我不想限制自己。

首先，这可能吗？其次，我将如何实现这一目标？第三，有没有办法让它在规模上相对而不是固定？

Answer 1

如果你恢复使用单个背景图像，我会说你会一直没有头疼 - 在这种情况下，切出一个缺口的白色图像（带有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。

The shape is based on this tutorial on CSS triangles。现在，我只在基于webkit的浏览器上试过这个，它可以工作。每次要更改字体大小时都必须调整高度，这是一个缺点。

Answer 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）

背景填充形状与文本在上面使用CSS

2 个答案: