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/