Auto-resizing skewed background in CSS (+ images?)

Question

I\'m going to convert this PSD image to CSS. I\'ve multiple h2s in multiple pages, so the inner text lenght and background-color may vary. Therefore the background should automa

Answer 1

here is the html:

    
here is a very long text adsadsad






    
this one is shorter

and here is the css that makes the custom shape:

.scewed-shape {
    display:inline-block;
    -webkit-transform: perspective(500px) rotateY(34deg);
    -ms-transform: perspective(500px) rotateY(34deg);
    left: -25px;
    height: 0;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}
.scewed-shape .text-align {
    position: relative;
    top: -25px;
}