Texte devant la forme CSS

Question

J'essaie d'obtenir que le texte soit en haut (ou en face) d'une forme CSS. Cela fonctionne avec border-bottom, mais pas avec border-top (qui est ce dont j'ai besoin pour ressembler). Je suppose que parce que la propriété border-top est définie qu'elle pousse le texte sous la forme.

Vous ne savez pas trop comment le faire fonctionner correctement sans utiliser d'image. J'aurais juré que j'avais déjà vu ça, mais je ne me souviens plus où.

Voici mon violon: 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

Vous avez besoin de 2 éléments et 2 styles CSS. Un pour le texte, et un pour l'arrière-plan:

<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

Vous pouvez insérer une balise span pour le texte et obtenez:

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

Démo http://jsfiddle.net/W2SPd/10/

Faisable?

Answer 3

C'est vraiment une mauvaise façon de le faire. Il prendra encore plus de place que nécessaire et vous demandez des problèmes potentiels sur la route. Oui, vous pouvez utiliser les exemples fournis par d'autres, mais si c'était moi, je ferais la forme d'une image et l'utiliser comme arrière-plan via CSS.

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

Answer 4

créer simplement un nouvel élément pseudo :after et le style de l'élément pseudo avec les styles de bordure au lieu :)

Les avantages? Vous n'avez pas besoin de créer de nouveaux éléments uniquement pour le style ou d'utiliser des imbrications/enveloppes inutiles sans signification sémantique; et ce n'est pas une solution basée sur l'image. L'inconvénient - nécessite le support du navigateur pour les pseudo-éléments, donc peut ne pas fonctionner sur les anciennes versions d'IE ... mais ce n'est pas quelque chose que vous devriez vous inquiéter.

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

Voir violon ici - http://jsfiddle.net/teddyrised/W2SPd/11/