title: background-image : trapeze CSS3
body: <p>Today I am again struggling with trapeze (yay) !</p>
  
  <p>Here's how it goes :</p>
  
  <p>I have a template which is like this :</p>
  
  <p><img src="https://i.stack.imgur.com/3KkUH.png" alt="render"></p>
  
  <p>(it's a cigarette pack template)</p>
  
  <p>I'm trying in css, to recreate the right side of the pack :</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="cote-droit"&gt;
     &lt;div class="inner"&gt;
         &lt;div class="cote-droit-top"&gt;&lt;/div&gt;
         &lt;div class="cote-droit-bot"&gt;&lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;
      }
  </code></pre>
  
  <p>With this code, I have :</p>
  
  <p><img src="https://i.stack.imgur.com/J2vbm.png" alt="top"></p>
  
  <p><img src="https://i.stack.imgur.com/v3x3h.png" alt="bottom"></p>
  
  <p>Which are the two parts of the right side, with blank part on the bottom of the right side, and blank part of the top of the right side</p>
  
  <p>So my question is : How do I get something like this :</p>
  
  <p><img src="https://i.stack.imgur.com/o7WcR.png" alt="render"></p>
  
  <p>Using absolute position doesn't make the white parts disappear, and I'm kind of stuck !</p>
  
  <p>Thanks for your time, I'm waiting for your answers here, and be glad to give you more informations if needed</p>