Рисование фигур в CSS

Question

Любая идея, как создать эту фигуру в CSS, как сохранить ее всегда центрированной при изменении размера?

Answer 1

Дело в том, чтобы использовать преобразования и установить трансформация-происхождение на «фиксированной» точке, здесь вверху справа:

transform-origin:100% 0; 

Тогда вы можете вращать и наклонять ваш элемент:

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

Answer 2

не идеальное решение и нуждается в некоторой модификации, но должны сделать трюк:

.wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 
.container { 
    margin-left:-1000px; 
    width: 4000px; 
    height: 2000px; 
    background-color: yellow; 
} 
.arrow { 
    width: 0; 
    height: 0; 
    border-top: 2000px solid red; 
    border-right: 2000px solid transparent; 
} 

Вы можете увидеть его здесь: http://codepen.io/anon/pen/vsaLc