Come faccio a creare uno sfondo triangolare con puro css

Question

Ho seguente blocco html

<div class=""header> 
    <i class="icon-star"></i> 
    <h1>some text goes here</h1> 
</div> 

e questi stili CSS

h1 { 
    display: inline-block; 
} 
i { 
    display: inline-block; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 200px 0 0 200px; 
    border-color: transparent transparent transparent red; 

} 

e anche io sto usando i font fontawesome icona. Quello che sto cercando di ottenere è questo

Questo è quello che ho provato jsfiddle. ho completamente fallito nel farlo. Qualcuno può aiutarmi?

Answer 1

mi sono trovato la risposta ..

0.123.516,41 mila

HTML

<div class=""header> 
    <i></i> 
    <h1>some text goes here</h1> 
</div> 

css

.header { 
    position: relative; 
} 

h1 { 
    margin: -130px 0 0 200px; 
} 
i { 
    color: red; 
    display: inline-block; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 200px 0 0 200px; 
    border-color: transparent transparent transparent black; 
} 
i:before { 
    font-family: 'FontAwesome'; 
    content: "\F005"; 
    font-size: 64px; 
    position: absolute; 
    top: 100px; 
    left: 40px; 
} 

jsfiddle

Answer 2

hai usato h1 nel tuo html e h2 nel tuo css!

questo può aiutare

h1 { 
    margin: -130px 0 0 200px; 
} 
i { 
    display: inline-block; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 200px 0 0 200px; 
    border-color: transparent transparent transparent red; 
} 

fiddle

Answer 3

Questo JFiddle potrebbe ottenere un po 'più vicino. Si prega di notare che questo è necessario che il triangolo di avere un'altezza fissa, così ho potuto utilizzare una line-height:

#text { 
float: right; 
line-height: 200px; 
vertical-align: middle; 
margin-right: 150px; 
font-weight: bold; 
font-size: 20px; 

Vuoi creare la stella nel triangolo utilizzando i CSS come bene?

Answer 4

come questo

dare line-height o position:absolute;

DEMO

CSS

h1 { 
    display: inline-block; 
    position:absolute; 
    line-height:150px; 

} 

Answer 5

Cosa ne pensate di questa soluzione? http://jsfiddle.net/XrAaP/

Ecco l'HTML. (Proper HTML. A differenza utilizzando il tag corsivo per altre cose ...)

<header> 
    <div class="triangle"></div> 
    <div class="foreground"> 
     <h1>Some text goes here</h1> 
     <p>*</p> 
    </div> 
</header> 

Ed ecco la CSS.

.triangle{ 
    border-style: solid; 
    border-width: 200px 0 0 200px; 
    border-color: transparent transparent transparent black; 
    display: inline-block; 
    vertical-align: top; 
} 

.foreground{ 
    display: inline-block; 
    vertical-align: top; 
} 

h1{ 
    margin-left: -128px; 
} 

p{ 
    color: #fff; 
    font-size: 8em; 
    margin: 0 0 0 -178px; 
}