How to create fluid trapezoid image with css? - css

Question

I am working on a website on which we have use parallax effect. In that there are some images which are triangle shaped, like this
& the image is transparent because it overlaps the above DIV. I am trying so many things with css. but didn't get the desired result. I achieve that desired result with fixed width. Check this http://jsfiddle.net/eJ7Sf/2/ but does not work with fluid width. Check what i still try but didn't work
http://jsfiddle.net/ceGGN/3/
http://jsfiddle.net/eJ7Sf/1/
NOTE: i know about css3 MASK property but it's not work in firefox previous browsers. I want the capability till firefox 3.6.13

Answer 1

Updated Answer (Pure CSS3)
Extreme requirements sometimes need extreme solutions. I've built upon my original answer (below) to make a pure css solution that works (and can be made to work better, if you want to invest the time in it). The current example is a bit "choppy" in rendering, which may be okay for you, but if not, you will need to extend the already obscene number of #media queries that are driving it (it would likely be much easier to implement using LESS or SASS; I put together a formula driven excel spreadsheet to help rapidly generate the numbers). It uses this code:
HTML
<div class="box">
<img src="yourImage.jpg" />
</div>
CSS
.box{
height:300px;
min-width: 100px; /*could be different, but you ought to have some min*/
overflow:hidden;
}
.box img {
height: 100%;
width: 100%;
-ms-transform-origin: 100% 100%; /* IE 9 */
-webkit-transform-origin: 100% 100%; /* Safari and Chrome */
-moz-transform-origin: 100% 100%; /* Firefox */
-o-transform-origin: 100% 100%; /* Opera */
transform-origin: 100% 100%;
}
/*Sample... you need alot of these--my fiddle example has 51*/
#media screen and (min-width: 100px) {
.box {
-ms-transform:skewY(45deg);
-moz-transform:skewY(45deg);
-webkit-transform:skewY(45deg);
-o-transform:skewY(45deg);
transform:skewY(45deg);
}
.box img {
-ms-transform:skewY(-90deg);
-moz-transform:skewY(-90deg);
-webkit-transform:skewY(-90deg);
-o-transform:skewY(-90deg);
transform:skewY(-90deg);
}
}
Here's how to calculate the degrees
Assuming height: 300px with the narrow side approximately 100px tall and equal angles on the trapezoid. This means the upper and lower offset is (300px - 100px) / 2 = 100px. Then the .box angles are set off the #media query min-width amounts according to this formula:
Angle = arctan(100/min-width) /*100 is the upper/lower offset as above*/
For the .box img angle take the Angle and multiply by -2. So that will yield your .box and .box img media queries and transforms as this pseudocode:
#media screen and (min-width: [your target min-width]) {
.box {transform: skewY(Angle)}
.box img {transform: skewY(-2*Angle)}
}
How smooth it functions depends completely upon how micro scale you make your changes to min-width to get a new angle setting. As I stated in my comment in the CSS code above, my example uses 51 media query calls and still has some choppiness to it.
Would it be better to use some javascript solution instead... probably, but that is totally up to the designer, so I offer this here as purely a proof of concept that it can be made to work with pure css.
Original Answer
This seems to be achieving a fluid width. I don't know how much control you want of either how much or what part of the image is being shown, so it may not entirely fit your needs, but it does make a flexible width image using transforms to give it a fake perspective look.

Answer 2

With SVG clip-path
You can achieve this shape with an inline SVG and the clipPath element :
<svg viewbox="0 0 10 6.7">
<defs>
<clipPath id="clip">
<polygon points="10 0, 10 6.7, 0 4.7, 0 2" />
</clipPath>
</defs>
<image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#clip)"/>
</svg>
With CSS clip-path
You can also achieve this shape with the CSS clip-path property. Browser support is pretty low (see canIuse) but it is an easy approach.
Here is an example :
img{
-webkit-clip-path:polygon(0% 20%, 100% 0%,100% 100%,0% 80%);
clip-path:polygon(0% 20%, 100% 0%,100% 100%,0% 80%);
}
<img src="http://i.imgur.com/5NK0H1e.jpg" alt=""/>

Answer 3

If you play a bit with pseudoelements and 2DTransforms (supported since Firefox 3.5) you can achieve this effect : http://jsfiddle.net/fcalderan/T5KPA/1/
I tried on Chrome and Firefox. For Opera and IE9 you need to add proprietary prefixes.
Markup is really essential:
<figure class="triangle">
<img src="http://cssglobe.com/lab/angled/img.jpg">
</figure>
and the css to obtain this effect:
img { display: block; }
.triangle {
position : relative;
overflow : hidden;
padding : 0; margin: 0;
display : inline-block;
}
.triangle:after,
.triangle:before {
content : "";
position : absolute;
z-index : 2;
left : -50%;
width : 200%;
height : 40%;
display : block;
background : #fff;
}
.triangle:before {
top: -24%;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.triangle:after {
bottom: -24%;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
}
I coloured the rotated pseudoelements using white but, of course, you can change the color so it fits the real background color