making the background like the attached image in CSS - css

Question

How can I make a background like the attached image in css? I have experimented with border so that I can give it a shape like the black part, but in that case I cannot write text so I guess border shapes of parallelogram will not work any other ideas?

Answer 1

You can write like this:
CSS
.tab{
width:200px;
height:40px;
position:relative;
background:#000;
}
.tab:after{
content:'';
right:-40px;
top:0;
position:absolute;
width:0;
height:0;
border-width:20px;
border-color: transparent transparent #000 #000;
border-style:solid;
}
Check this http://jsfiddle.net/696Sb/
Y0u can also use css3 transform for this. Write like this:
.tab:after{
content:'';
right:-30px;
top:10px;
position:absolute;
width:60px;
height:60px;
background:#000;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
Check this http://jsfiddle.net/696Sb/1/

Answer 2

Here are 2 tutorials to make diagonal/triangle in CSS:
How to Create Diagonal Lines with CSS
CSS triangle
Do you want to be able to write under the uppermost black horizontal line (on left, left of the diagonal)?

Answer 3

Hey now you can do this use after and before properties in css as like this
HTML
<div class="shape"></div>
Css
.shape{
background:#000;
margin:40px 20px;
height:100px;
width:700px;
position:relative;
}
.shape:after{
content:'';
position:absolute;
top:-20px;
right:0;
height:20px;
border-left:solid 30px #000;
border-right:transparent 30px solid;
border-top:transparent 20px solid;
}
.shape:before{
content:'';
position:absolute;
top:-20px;
left:0;
right:60px;
height:20px;
background:#000;
}
Live demo http://jsfiddle.net/uuxd8/
Updated
Live demo two http://jsfiddle.net/uuxd8/1/