background-image : trapeze CSS3

Question

Today I am again struggling with trapeze (yay) !

Here's how it goes :

I have a template which is like this :

render

(it's a cigarette pack template)

I'm trying in css, to recreate the right side of the pack :

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

With this code, I have :

top

bottom

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

So my question is : How do I get something like this :

render

Using absolute position doesn't make the white parts disappear, and I'm kind of stuck !

Thanks for your time, I'm waiting for your answers here, and be glad to give you more informations if needed

Do you have to use the same image as above? What about a [sprite image](http://css-tricks.com/css-sprites/)? Can you elaborate what text should be placed inside cote-droit-top and cote-droit-bot? How should the background be positioned in regards to other text oder other div nodes? — surfmuggle, Apr 29 '13 at 19:09
OT: mixing français and english `.cote-droit-top + .bot(tom)` ? 1 JCVD point for you ^^ — FelipeAls, Apr 29 '13 at 19:13
@threeFourOneSixOneThree There are no such things as text inside those div, all I have is this image, and I'm trying to get different angles of view using css (front, back, right side, left side). What are you thinking about ? — Pretty Good Pancake, Apr 29 '13 at 19:19
The white part you want to hide have a length (height) that depends on the angle of the triangles I think. — FelipeAls, Apr 29 '13 at 19:26
I have the length and height of this triangle, I just don't know how to hide it ! — Pretty Good Pancake, Apr 29 '13 at 19:32

surfmuggle · Answer 1 · 2013-04-29T20:05:30.173

1

The problem is the diagonal line. So to avoid it you could do the following:

.cote-droit-bot could stop at the start of the diagonal part
.cote-droit-top could be taken from the yellow background above the filter and below the red line to get the right height.

This is your code with a minor movement of the background and the height. This not yet what you are looking for but it may be close enough to give some ideas.

Update: I removed the background-image for cote-droit-top and used a background-color instead. This solution should come pretty close (at least it was until i read your recent comment)

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

edited Apr 29 '13 at 20:05

answered Apr 29 '13 at 19:38

surfmuggle

4,899
6
42
71

Well, it's a nice solution, but I'm afraid that won't work because most of the packs have side designs... Is there something I can do in JS with particulars to make it right ? – Pretty Good Pancake Apr 29 '13 at 19:58
Can you place a marker (red border) in the cigarette pack template image for which areas you would like to put the parts together? – surfmuggle Apr 29 '13 at 20:08
I was thinking about putting two divs over each other using z-index - but for that to work the image would have to be transparent. Do you have the option to change the image format so that it supports transparency (either gif or png)? – surfmuggle Apr 29 '13 at 20:15
Well, there's a white background in the template as a png, so there's no transparency. Is there a workaround using canvas ? I've never used it but might it be a lead ? – Pretty Good Pancake Apr 29 '13 at 20:23
I have not worked with canvas myself but this could be helpfull: [css-skew-only-container-not-content](http://stackoverflow.com/questions/14615492/css-skew-only-container-not-content) – surfmuggle Apr 29 '13 at 20:58

background-image : trapeze CSS3

1 Answers1