Two trapeze aside in css3

Question

I have a small issue about css3 and trapeze. I have two square images side by side (float left each - white dots) and I want them to look like this :

side by side shapes

How would you do it? Is it possible?

score 2 · Answer 1 · answered Mar 28 '13 at 21:17

2

If the pic1 is a .png and the negative space created by the angle of the trapeze edge is transparent, then this should work:

#pic1, #pic2 {
    float: left;
    position: relative;
}
#pic1 {
   z-index: 2;
}
#pic2 {
   right: 30px; /* Or whatever the difference in image sizes is */
}

answered Mar 28 '13 at 21:17

FaCE

188
9

1

Okay, think I've got a pure css solution :) I'll edit this comment with a fiddle :) – FaCE Mar 28 '13 at 21:25
1

Well, I've tried using a mixture of border images and transparent borders (can't get a full-sized image in the border, nor the other borders to completely disappear), css3 transforms (skews the image), and I think that without manipulating the pictures in `canvas` I'm not entirely sure it can be done :oS Sorry! – FaCE Mar 28 '13 at 21:46
Well how would you do with a canvas ?(without abusing your time, thanks again !) – Pretty Good Pancake Mar 28 '13 at 21:53
1

Well, that is the question isn't it? I honestly don't know :o] I'm guessing someone on here will... But it does seem like a bit of a sledgehammer for what you're trying to achieve. If it's possible to do the png thing, then that seems the most simple solution to me :) sorry I can't be of much more help! – FaCE Mar 28 '13 at 22:05

score 1 · Answer 2 · answered Mar 28 '13 at 21:58

1

You can use the CSS triangle trick with the transparent borders

html

<div class="pic pic-1">Pic 1</div>
<div class="pic pic-2">Pic 2</div>

css

.pic{
    width:100px;
    height:100px;
    float:left;
    text-align:center;
    line-height:100px;
    color:white;
    position:relative;
}
.pic-1{
    background:orange;
}
.pic-2{
    background:limegreen;
}
.pic:after{
    content:'';
    display:block;
    position:absolute;
    height:0;
    width:0;
    z-index:10;
}
.pic-1:after{
    top:0;
    right:-10px; /* must match the border left */
    border-left: 10px solid orange; /*play with width to change angle*/
    border-bottom:50px solid transparent;
}
.pic-2:after{
    bottom:0;
    left:-10px; /* must match the border right*/
    border-right: 10px solid limegreen;/*play with width to change angle*/
    border-top:50px solid transparent;
}

Demo at http://jsfiddle.net/gaby/eh2f3/

answered Mar 28 '13 at 21:58

Gabriele Petrioli

191,379
34
261
317

Well, that do work with background, but what about images ? I'm trying right now and can't figure out what to do with it... Some help ? – Pretty Good Pancake Mar 28 '13 at 22:12
@user2015854 what should the extra image contain if your images are square ? – Gabriele Petrioli Mar 28 '13 at 22:13
Well, that's a heck of a good question... I should have rectangles right ? – Pretty Good Pancake Mar 28 '13 at 22:16
:) yep.. there should be content to be displayed.. i will look if that is doable with border-images.. – Gabriele Petrioli Mar 28 '13 at 22:19
Ps: if you find something with squares that work, I'll give you 10000 internet points – Pretty Good Pancake Mar 28 '13 at 22:39
1

@user2015854, only way i see is the technique described in http://stackoverflow.com/questions/10969941/css3-triangle-shape-with-background-image (*it will need adjustments to the math*) – Gabriele Petrioli Mar 29 '13 at 00:20

score 1 · Answer 3 · answered Mar 29 '13 at 10:17

First of all you begin setting a strip that will cut alogn the top and botom borders, and where you will place the images:

.demo1 {
    overflow-y: hidden;
}

Inside, there will be the base elements, that are floated left,

.base {
    width: 100px;
    height: 100px;
    float: left;
}

Inside, a clipping element rotated:

.demo1 .clip {-webkit-transform: rotate(15deg);}

.clip { 
    height: 177%; 
    width: 125%; 
    margin-top: -40%; 
    -webkit-transform-origin: 0% 50%; 
    overflow: hidden
}

and inside, the image, counter-rotated .demo1 .inner { -webkit-transform: rotate(-15deg); } .inner { -webkit-transform-origin: 0% 50%; margin-left: -151%; margin-top: 19%; }

The html is :

WEBKITTED DEMO webkitted means that only webkit prefixes are used :-)

Since somebody out there was offering 1 milliion points, I decided to do an extra effort. See the second strip (demo2) where the rotations are specified thru nth-child(). That allows to get different angles for every transition.

Full CSS :

.demo1, .demo2 {
overflow-y: hidden;
}
.base {
width: 100px;
height: 100px;
float; left;
}

.clip {height: 177%; width: 125%; margin-top: -40%;-webkit-transform-origin: 0% 50%; overflow: hidden}
.inner {-webkit-transform-origin: 0% 50%;margin-left: -151%;margin-top: 19%;}
.terminator {background-color: white}

.demo1 .clip {-webkit-transform: rotate(15deg);}
.demo1 .inner {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(odd) .clip {-webkit-transform: rotate(15deg);}
.demo2 :nth-child(odd) .inner {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(even) .clip {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(even) .inner {-webkit-transform: rotate(15deg);margin-left: -151%;margin-top: -30%;}

Note the calculus to place the images accurately are strange; I end doing it by trial and error. Also, you need images with plenty of margin to be cutted without losing the point of interest.

Two trapeze aside in css3

3 Answers3