tweaking CSS3 transform property

Question

HTML:

<header>
    Header text.
</header>

<main>
    Your content here. 
</main>

CSS:

header {
    position: relative;
    background: #5fa3c6;
    padding: 8px 10px;
    color: #ffffff;
    font-size: 20px;
}

header:before {
    z-index: -1;
    position: absolute;
    width: 14px;
    height: 14px;
    background: #3b6c8a;
    content: '';
    left: 3px;
    bottom: -7px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

main {
    margin-left: 10px;
    border-left: 1px #5fa3c6 solid;
    padding: 10px;
    background: #ffffff;
}

Fiddle: http://jsfiddle.net/LutJQ/3/

How can i achieve something like this below? I tried with transform property but no luck.

Answer 1

JSFiddle : http://jsfiddle.net/LutJQ/9/

Solution without rotate

header:before {
    z-index: -1;
    position: absolute;
    content: '';
    left: 0px;
    bottom: -10px;
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right:10px solid #476473; 
}

Answer 2

The usual way to do this is with borders:

Working demo

header:before {
    content: "";
    border: 10px solid transparent;
    border-right: 10px solid blue;
    border-top: 10px solid blue;
    position: absolute;
    bottom: -20px;
    left: 0;
}

No CSS3 required so browser compatibility is great.

Answer 3

You are missing some SkewX()

FIDDLE

-webkit-transform: skewX(45deg) rotate(45deg);
-moz-transform: skewX(45deg) rotate(45deg);
-o-transform: skewX(45deg) rotate(45deg);
-ms-transform: skewX(45deg) rotate(45deg);
transform: skewX(45deg) rotate(45deg);