如何在不扭曲图像的情况下获得空中飞人图像？

Question

我试图以空中形式呈现图像，而不会弄乱实际图像，也不会使用歪斜。我该怎么办？

Answer 1

假设你的意思是“梯形”图像，请使用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%);
}

演示：

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

注意：浏览器支持不是很好，因此请确保彻底测试，或者可以接受其他浏览器的降级性能。否则，最可靠的方法是编辑图像以使用沿剪辑路径具有透明背景的PNG。

Answer 2

您可以使用画布来实现此目的：

Online demo here

简单调整 HTML 以改为使用画布：

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

删除一些 CSS 规则规范：

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

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

并在 JavaScript 部分中添加：

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);
}

这适用于所有现代浏览器。如果不需要，那么palpatim的方法会更快。

希望这有帮助。