html - CSS 形状前面的文本

Question

我试图让文本位于 CSS 形状的顶部(或前面)。它适用于 border-bottom，但不适用于 border-top(这是我需要的样子)。我假设因为设置了 border-top 属性，所以它将文本推到形状下方。

不太确定如何在不使用图像的情况下使其正常工作。我本可以发誓我以前见过这种情况，但我不记得在哪里。

这是我的 fiddle :http://jsfiddle.net/ultraloveninja/W2SPd/

<h1>the trap</h1>

h1 {
    border-top: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

Answer 1

您需要 2 个元素和 2 个 CSS 样式。一张用于文字，一张用于背景:

<h1><div>the trap</div></h1>

CSS

h1 {
    border-top: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}
h1 div {
    position: relative;
    top: -100px;
}

http://jsfiddle.net/vPt7h/