2

我继承了一个遗留应用程序进行重写，并遇到了一个奇怪的问题。页面上显示了表格数据，其中表格的标题位于类似于马尼拉信封标签的梯形形状内。在此类表格的底部，通常有一个与表格标题形状相同但旋转 180° 的按钮行。目前，这种效果正在通过使用透明背景上一半白色三角形的正方形图像作为矩形块角落的背景图像来实现梯形外观。但是，这种技术在页面刷新时容易出现闪烁。

作为一个练习，我试着看看我是否可以用纯 CSS 技术来代替它。我在 CSS 中找到了指向不同形状的链接，并模拟了梯形以使其看起来像我需要的那样。我能够正确地将表格标题文本放置在梯形内。但是，当我需要 180° 旋转梯形的外观时，我无法将文本放置在形状内。我的代码包含在下面，这是一个jsFiddle，显示了我到目前为止所完成的工作。我知道文本显示在旋转梯形下方，因为高度设置为 0，并且我使用border-top 来构建形状。我能做些什么来让它正常工作吗？

请记住，我需要它在 IE8 中显示（也可能在兼容模式下的 IE8 -- IE7）中显示。此外，我希望将额外的 HTML 元素保持在最低限度，因为我希望尽可能保持语义化。我知道我可以在 div 内放置一个跨度并绝对定位该跨度，以便它在形状内显示文本，但是当我这样做时，我必须手动设置梯形上的宽度，并且宽度可以从按钮行变化到按钮行，我宁愿不走那条路。

谢谢。

HTML：

<div class="trap">Title Text</div>
<div class="trap180">Button Row</div>​

CSS：

.trap {
    color: black;
    font: normal bold 13px Arial;
    border-bottom: 27px solid #F00;
    border-right: 27px solid transparent;
    height: 0px;
    float: left;
    line-height: 27px;
    padding: 0 4px;
}

.trap180 {
    clear: both;
    color: black;
    font: normal bold 13px Arial;
    border-top: 27px solid #F00;
    border-left: 27px solid transparent;
    height: 0px;
    float: right;
    margin: 20px 0 0 0;
    line-height: 27px;
    padding: 0px 4px 0;
}​
4

1 回答 1

1

使用伪元素是可能的。但我无权访问那些旧浏览器进行测试。

.trap, .trap180 {
    color: black;
    font: normal bold 13px Arial;
    float: left;
    line-height: 30px;
    height: 30px;
    padding: 0 4px;
    background: salmon;
    position: relative;
}

.trap180 {
    float: right;
    margin: 20px 0 0 0;
}

.trap:after,.trap180:after {
    content: '';
    position: absolute;
    height: 0px;
    width: 40px;
    top: 0;
}
.trap:after {
    right: -30px;
    border-bottom: 30px solid salmon;
    border-right: 30px solid transparent;
    z-index: -10;
}
.trap180:after {
    left: -30px;
    border-top: 30px solid salmon;
    border-left: 30px solid transparent;
    z-index: -10;
}
​

演示

坦率地说，如果您仍然需要支持 IE7，我只会使用图像或允许稍微优雅的降级。

于 2012-10-26T13:37:21.820 回答