Interlocking Trapezoid CSS3

Asked Dec 23 '15 at 00:29

Active Dec 23 '15 at 00:56

Viewed 65 times

I've been trying to use transform like CSS3 Transform to Trapezoid to achieve the look in my attached photo.

I am having trouble making them interlock cleanly as per my crappy wireframe. Also making the background of them a slightly opaque photo having the ability to adjust the images position easily.

Any help is much appreciated!

Current: http://cssdeck.com/labs/lrjtihdm

crappy wireframe

edited May 23 '17 at 12:07

Community

asked Dec 23 '15 at 00:29

Elrex

What does your HTML look like? What have you tried so far? Where are you getting stuck? – 3ocene Dec 23 '15 at 00:31
Right now I am just building out the basic structure so just empty divs. – Elrex Dec 23 '15 at 00:33
Okay... What have you tried? What was the result? Can you include a picture or http://jsfiddle.com of what you have? – 3ocene Dec 23 '15 at 00:37
If you put it in your question then you can format it. – 3ocene Dec 23 '15 at 00:37
@Omninero Please [edit] your question to include relevant details, instead of posting them into comments. – Sebastian Simon Dec 23 '15 at 00:38
Sorry, new to the site/ and html/css in general. Just finished the Codecademy course, trying out my first project on my own. – Elrex Dec 23 '15 at 00:39

Interlocking Trapezoid CSS3

0 Answers0