html - 调整 CSS3 变换属性

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/

我怎样才能达到下面这样的效果？我尝试使用 transform 属性，但没有成功。

Answer 1

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

没有旋转的解决方案

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; 
}