how can I get a trapeze image without distorting the image?

Question

I'm trying to present the image in a trapeze form without messing with the actual image nor using skew. How can I do it?

Answer 1

You can use a canvas for this resulting in this:

Online demo here

A simple adjustment of the HTML to use a canvas instead:

<div class="box">
    <canvas id="canvas"></canvas>
</div>    

Remove some of the CSS rule specifications:

.box{
    height:300px;  
    overflow:hidden;
}

.box > canvas {
    height: 100%;
    width: 100%;
}

And add this in the JavaScript section:

var img = new Image,
    ctx = document.getElementById('canvas').getContext('2d');

/// load image dynamically (or use an existing image in DOM)
img.onload = draw;
img.src = 'http://cssglobe.com/lab/angled/img.jpg';

function draw() {

    /// set canvas size = image size
    var w, h;
    canvas.width = w = this.naturalWidth;
    canvas.height = h = this.naturalHeight;

    /// draw the trapez shape
    ctx.moveTo(0, h * 0.25);
    ctx.lineTo(w, 0);
    ctx.lineTo(w, h);
    ctx.lineTo(0, h * 0.75);

    /// make it solid
    ctx.fill();

    /// change composite mode to replace the solid shape
    ctx.globalCompositeOperation = 'source-in';

    /// draw in image
    ctx.drawImage(this, 0, 0);
}

This works in all modern browsers. If that's not needed then palpatim's approach is quicker.

Hope this helps.

Answer 2

Assuming you mean "trapezoidal" image, ry using clip-path:

img {
  -moz-clip-path: polygon(0 50%, 100% 0, 100% 100%);
  -o-clip-path: polygon(0 50%, 100% 0, 100% 100%);
  -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

demo here:

http://jsfiddle.net/Palpatim/ceGGN/114/

NOTE: Browser support isn't great for this, so make sure you test it thoroughly, or can accept a degraded performance on other browsers. Otherwise, the surest way to accomplish this is to edit your image to use a PNG with transparent background along your clip path.