Drawing Shapes in CSS

Question

Any idea how to create that shape in CSS an how to keep it always centered while resizing ??

Answer 1

The point is to use transforms and set the transform-origin on the "fixed" point, here top right so :

transform-origin:100% 0;

Then you can rotate or skew your element :

DEMO

HTML :

<div></div>

CSS :

body{
    background:gold;
}
div{
    position:absolute;
    width:100%; height:100%;
    right:50%; top:0;
    background:teal;
    -webkit-transform-origin:100% 0;
    transform-origin:100% 0;
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
}