1

テキストをCSS図形の上（または前）に配置しようとしています。で動作しますがborder-bottom、では動作しませんborder-top（これが私が必要としているものです）。border-topプロパティが設定されているため、テキストを図形の下にプッシュしていると思います。

画像を使用せずに正しく機能させる方法がよくわかりません。これが以前に行われたのを見たことがあると誓ったかもしれませんが、どこにいるのか思い出せません。

これが私のフィドルです：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;
}
4

4 に答える 4

2

2 つの要素と 2 つの CSS スタイルが必要です。1 つはテキスト用、もう 1 つは背景用です。

<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/

于 2013-03-01T23:31:14.697 に答える