How to create a triangular background with CSS - html

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?

Answer 3

LIke this
give line-height or position:absolute;
DEMO
CSS
h1 {
display: inline-block;
position:absolute;
line-height:150px;
}

Answer 4

What do you guys think of this solution? http://jsfiddle.net/XrAaP/
Here's the HTML. (Proper HTML. Unlike using the italic tag for other things...)
<header>
<div class="triangle"></div>
<div class="foreground">
<h1>Some text goes here</h1>
<p>*</p>
</div>
</header>
And here's the 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;
}

Answer 5

EDIT:
I was able to achieve this with css Pseudo-elements
From MDN
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.
.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;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="" header>
<i></i>
<h1>some text goes here</h1>
</div>
jsfiddle