background-image: trapeze CSS3

Question

Сегодня я снова борюсь с трапецией (yay)!

Вот как это происходит:

У меня есть шаблон, который, как это:

(это шаблон пачка сигарет)

Я пытаюсь в CSS, чтобы воссоздать правую сторону упаковки:

HTML

<div class="cote-droit"> 
    <div class="inner"> 
     <div class="cote-droit-top"></div> 
     <div class="cote-droit-bot"></div> 
    </div> 
</div> 

CSS

.cote-droit .inner 
    { 
     position: relative; 
     height: 293.04px; 
     width: 64.076px; 
    } 
.cote-droit-top 
    { 
     width: 64.076px; 
     height: 72.49px; 
     background: url(pack.png) -227.567px -604.822px no-repeat; 
    } 

.cote-droit-bot 
    { 
     width: 64.076px; 
     height: 220.55px; 
     background: url(pack.png) -227.567px 0 no-repeat; 
    } 

С помощью этого кода, у меня есть:

Какие две части с правой стороны, с пустым часть на дне r IGHT сторона, и пустая часть верхней правой части

Так что мой вопрос: Как я могу получить что-то вроде этого:

Используя абсолютное положение не делает белые части исчезают , и я как бы застрял!

Спасибо за ваше время, я жду ваших ответов здесь, и будем рады предоставить вам больше информации, если это необходимо

Answer 1

Проблема диагональная линия. Таким образом, чтобы избежать этого вы можете сделать следующее:

• .cote-прерогатива-бот может остановиться в начале диагональной части
• .cote-прерогатива верхом может быть взят из желтого фона над фильтром и ниже красной линии, чтобы получить правильную высоту.

Это ваш код с незначительным перемещением фона и высоты. Это not yet what you are looking, но это может быть достаточно близко, чтобы дать некоторые идеи.

Обновление: Я удалил фоновое изображение для cote-droit-top и вместо этого использовал фоновый цвет. This solution should come pretty close (по крайней мере, это было до тех пор, пока я не прочитал ваш последний комментарий)

.cote-droit .inner 
{ 
    position: relative; 
    height: 293.04px; 
    width: 64.076px; 
} 

.cote-droit-top 
{ 
    width: 64.076px; 
    height: 34px; 
    background: url(http://i.stack.imgur.com/uiluV.jpg) -227.567px -604px no-repeat;   
} 

.cote-droit-bot 
{ 
    width: 64.076px; 
    height: 180px; 
    background: url(http://i.stack.imgur.com/uiluV.jpg) -227.567px -40px no-repeat;   
}