CSS3 using overlap or side by side positioning in responsive design
Question
I'm still learning my way around in CSS3 and responsive design.
Stack has been great and has helped in many cases but I am stuck on this one.
I want a responsive site with angled images, so I was trying to use side by side divs that were responsive or divs that overlap. I found this bit of code below but it still not working as expected/desired.
Here is a Fiddle that was a good start, but ultimately I could not get it to adjust smoothly
<body>
<div style="background-color:red;
width:300px;
height:100px;
position:relative;
top:10px;
left:80px;
z-index:2">
</div>
<div style="background-color:yellow;
width:300px;
height:100px;
position:relative;
top:-60px;
left:35px;
z-index:1;">
</div>
<div style="background-color:green;
width:300px;
height:100px;
position:relative;
top:-220px;
left:120px;
z-index:3;">
</div>
</body>
So is it best have side by side divs or overlapping divs, for fluid responsive adjustments?
Since I may not be explaining what I'm looking for, this is a sketch of the desired result I'm trying to explain
1 answers
solution1
1 ACCPTED 2015-05-23 15:05:51
Do you want something like this?
https://jsfiddle.net/7h0dL9jc/9/
html:
<body>
<div style="margin-left: 15%;">
<div class="box" style="background-color:red;"></div>
<div class="box" style="background-color:yellow;"></div>
<div class="box" style="background-color:green;"></div>
</div>
</body>
css:
.box {
background-image: url('https://placeimg.com/640/480/any');
width:33%;
height:200px;
float:left;
display: inline-block;
-ms-transform: skewX(-5deg); /* IE 9 */
-webkit-transform: skewX(-5deg); /* Safari */
transform: skewX(-5deg);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.