CSS Background Position Custom X и Y Degree

Question

У меня есть изображение PSD, для которого требуется настройка фоновой позиции между x и y. это мой PSD

это часть моего кода в CSS

html{ 
background:#aea99f; 
} 
body{ 
background-image: url("http://i.imgur.com/H3fh4Ht.png"); 
background-repeat: repeat; 
background-position: 48% 20%; 
margin: 0 auto; 
width: 94%; 
} 

Но как логика, чтобы настроить наклон в верхней части, на стороне справа налево и снизу?

JS Пример http://jsfiddle.net/zmkkdj46/

Благодаря

Answer 1

Добавление к Джагдиша ответа, для того, чтобы работать в Firefox, пожалуйста, добавьте эту

HTML

<div id="div1"> 
    123 rtrrrrr rt 

</div> 
<svg id="svg1"> 
    <defs> 
     <clippath id="my-definition" clipPathUnits="objectBoundingBox"> 
      <polygon points=".09 1, 0.94 1, 1 0, 0 0"></polygon> 
     </clippath> 
    </defs> 
</svg> 

CSS

div{ 
    width: 94%; 
    height:100%; 
    background: #fff; 
    -webkit-clip-path: polygon(9% 100%, 94% 100%, 100% 0, 0 0); 
clip-path: url(#my-definition) 
} 
svg{ 
    width: 1%; 
    height:100%; 
} 
html, body {width:100%; height: 100%; background:#aea99f;} 
body{display:flex; justify-content:center; align-items:center; padding:0px; margin:0px;} 

Обновлено Fiddle Link:

путем добавления clipPathUnits="objectBoundingBox" сделает трюк

Answer 2

См Пример: fiddle

HTML:

<div> 
123 
</div> 

CSS:

div{ 
width: 94%; 
height:100%; 
background: #fff; 
-webkit-clip-path: polygon(9% 100%, 94% 100%, 100% 0, 0 0); 
clip-path: polygon(9% 100%, 94% 100%, 100% 0, 0 0); 
} 

html, body {width:100%; height: 100%; background:#aea99f;} 
body{display:flex; justify-content:center; align-items:center; padding:0px; margin:0px;}