Question

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

作为练习，我试图看看是否可以用纯CSS技术替换它。我在CSS中找到了不同形状的link，并模仿了梯形，看起来像我需要的那样。我能够正确地将表格标题文本放在梯形中。但是，当我需要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;
}

Answer 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;
}

Demo

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

将文本放在CSS梯形上

1 个答案: