How to create different shape of trapezoid images using css? - html

Question

I am working on a website where I need to use different trapezoid shape of images. Here I am giving you that image in link:
Thanks Riccardo, Appreciate your effort.
Following are the 2 points I still need to sort it out.
This is the image that I got after implement your code.
Shape of the site will be skewed but not the image. The current shape is perfect but all images are also got skewed along with the shape which I don't want. I want all the images not to be shown as skewed as it is showing right now. So need guidance on that particular issue.
And the 2nd most important thing is about the total structure of the site. My site will be in 100% but in Container, you have given fixed height and width but I want the height and the width will be 100%.
I have tried by putting 100% width instead of current pixels but it all messed up. Here I am posting my given css. The left part of the shape is fixed, its not increasing while I am giving the widhth 30%. And the right side shape is moving far right and in between middle and right shape the container backgroup is shown which is in orange color as per the css code. And eventually I messed up all things, Here is thislink of that:
One more thing I would like to add is that Can it be possible to put 100% height on that container. Because whenever I tried to put height 100%, the whole structure get vanished. So any solution in that particular height point?
The both image issue and width height 100% issue are important for the website to function. So need your guidance on this.

Answer 1

HTML STRUCTURE FOR REFERENCE:
<div id="container">
<span id="left">
<img src=""/>
</span>
<span id="middle">
<img src=""/>
</span>
<span id="right"></span>
</div>
I made this example for you with pure css.
Now let explain how I made it.
I take a container, set the dimension of that and the relative position.
#container{
width: 600px;
background-color: orange;
height: 300px;
overflow: hidden;
position: relative;
}
If you set the overflow: hidden all the element inside the container will be truncated and they can't expand outside of the parent.
After that I put 3 span in the container, they are inline element so I can't set their width or height. To do that I set their display: property to inline-block. Now I can give to the span a dimension.
The span are in a absolute position because I want the spans to be able to overlap.
For that after the absolute position use z-index.
The 3 span ids.
#left {
position: absolute;
left: -100px;
display: inline-block;
width: 300px;
background-color: red;
height: 300px;
transform: skew(-20deg, 0deg);
-ms-transform: skew(-20deg, 0deg); /* IE 9 */
-webkit-transform: skew(-20deg, 0deg); /* Safari and Chrome */
z-index: 1;
overflow: hidden;
}
#left img {
-webkit-transform: skew(20deg,0deg);
}
#middle {
position: absolute;
left: 200px;
display: inline-block;
width: 200px;
background-color: green;
height: 300px;
transform: skew(-20deg, 0deg);
-ms-transform: skew(-20deg, 0deg); /* IE 9 */
-webkit-transform: skew(-20deg, 0deg); /* Safari and Chrome */
z-index: 3;
border-right: 10px solid white;
border-left: 10px solid white;
overflow: hidden;
}
#middle img {
-webkit-transform: skew(20deg, 0deg);
margin-left: -50px;
}
#right {
position:absolute;
right:-100px;
display:inline-block;
width:400px;
background-color:gray;
height:300px;
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
z-index:2;
overflow:hidden;
}
As you can see there are the skew transformation for the shapes, and also the overflow: hidden because I don't want the img inside the span go outside the parent area.
When I put an img inside the skewed span, it take also the skew of the shape. So apply the
#nameofskewedcontainer img {
-webkit-transform: skew(20deg, 0deg);
}
where the skew property are exactly the opposite that is applied to the span. With that I keep the img with the standard shape without skew. (try to remove that in jsfiddle demo and see)
So I hope I was clear. For everything leave a comment!
SECOND UPDATED SOLUTION:
WIDTH 100%
CSS->
#container {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
#left {
position: absolute;
left: -100px;
display: inline-block;
width: 50%;
height: 300px;
transform: skew(-20deg, 0deg);
-ms-transform: skew(-20deg, 0deg); /* IE 9 */
-webkit-transform: skew(-20deg, 0deg); /* Safari and Chrome */
z-index: 1;
overflow: hidden;
}
#left img {
transform: skew(20deg, 0deg);
-moz-transform: skew(20deg, 0deg);
-webkit-transform: skew(20deg, 0deg);
}
#middle {
position:absolute;
left: 30%;
display: inline-block;
width: 40%;
height: 300px;
transform: skew(-20deg, 0deg);
-ms-transform: skew(-20deg, 0deg); /* IE 9 */
-webkit-transform: skew(-20deg, 0deg); /* Safari and Chrome */
z-index: 3;
border-right: 10px solid white;
border-left: 10px solid white;
overflow: hidden;
}
#middle img {
transform: skew(20deg, 0deg);
-moz-transform: skew(20deg, 0deg);
-webkit-transform: skew(20deg, 0deg);
margin-left: -50px;
}
#right {
position: absolute;
right: -100px;
display: inline-block;
width: 50%;
background-color: gray;
height: 300px;
transform: skew(-20deg, 0deg);
-ms-transform: skew(-20deg, 0deg); /* IE 9 */
-webkit-transform: skew(-20deg, 0deg); /* Safari and Chrome */
z-index: 2;
}
Anyway roy, remember that in stackoverflow you can ask of something, but also you have to practice with the answers that are given to you. This is the only way you can really learn something.