【问题标题】：how can I get a trapeze image without distorting the image?如何在不扭曲图像的情况下获得空中飞人图像？
【发布时间】：2014-02-07 11:00:27
【问题描述】：

我正在尝试以梯形形式呈现图像，而不会弄乱实际图像，也不会使用倾斜。我该怎么做？

【问题讨论】：

“空中飞人”是什么意思？你试过什么？
我尝试使用边框技巧，但无法使图像仅出现在一个边框中以保持梯形效果。也尝试使用这个jsfiddle.net/ceGGN/38，但它会扭曲图像。我需要它保持好像我只是剪了一个边缘
好吧，下次说清楚点，并提供问题中的小提琴。我建议进行修改。

标签： css image css-shapes

【解决方案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。

【讨论】：

谢谢！！希望可以使它在大多数浏览器中工作。问题是我需要以一种用户可以上传新图像而无需先编辑它的方式制作它..

【解决方案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 的方法会更快。

希望这会有所帮助。

【讨论】：