How to create a triangular background with CSS

Question

I have following html block

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

and these css styles

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;

}

and also i am using fontawesome icon fonts. What i am trying to achieve is this

This is what i have tried jsfiddle . i completely failed to do this. Could someone please help me?

Answer 1

you have used h1 in your html and h2 in your css!

this may help

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 2

This JFiddle might get you a little closer. Please note that this requires your triangle to have a fixed height, so I could use a line-height:

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

Do you want to create the star in the triangle using CSS as well?