Текст перед формой CSS

Question

Я пытаюсь получить текст сверху (или перед) формы 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; 
} 

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/

Answer 2

Вы можете вставить span тег для текста и получить:

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

Демо-версия http://jsfiddle.net/W2SPd/10/

Возможный?

Answer 3

Это действительно плохой способ сделать это imo. Он по-прежнему занимает больше места, чем нужно, и вы просите о возможных проблемах в будущем. Да, вы можете использовать примеры, предоставленные другими, но если бы это был я, я бы сделал форму изображением и использовал его как фон через CSS.

.myShape { background:url(/pathto/your/image.png); width:150px; height:100px; } 

Answer 4

Просто создайте новый псевдо элемент :after, а затем стиль псевдо элемент с пограничными стилями вместо :)

Преимущества? Вам не нужно создавать новые элементы только для одного стиля или использовать ненужную вложенность/обертку без семантического значения; и это не решение на основе изображений. Недостаток - требуется поддержка браузера для псевдоэлементов, поэтому может не работать на старых версиях IE ... но это не то, о чем вам следует беспокоиться.

h1 { 
    width: 100px; 
    padding: 0 50px; /* To account for the left and right borders in pseudo element to ensure it lines up */ 
} 
h1:after { 
    content: " "; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border-top: 100px solid red; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    z-index: -1; /* Displays pseudo element behind text */ 
    width: 100px; 
} 

См скрипку здесь - http://jsfiddle.net/teddyrised/W2SPd/11/