如何使用canvas或css制作这个“垂直裁剪图像”？

Question

我在某些网站的一些首页部分看到了同一部分顶部的css效果，如“水平 - 垂直 - 裁剪”，这些都是通过一些css（border-color＆amp; border-stile）完成的

但我如何用背景图片代替颜色呢？ （在下图中更好地解释）

Explanation

原始网站链接：here

我可以用canvas或css做到吗？非常感谢提前！

Answer 1

这是一个你可以使用的纯css解决方案，但我强烈推荐使用SVG（ 可缩放矢量图形）。

为了使三角形响应css我使border-right成为一个高数字，以确保它适用于大型计算机，媒体查询可以帮助小尺寸。这就是为什么SVG会更好，因为当设置为100％宽度时它会响应。

这是html：

<div class="triAngl">
    <div class="inner"></div>
</div>

这是css：

.triAngl, .inner {
    width: 100%;
    height: 300px;
    position: absolute;
    top: 50%;
    margin-top: -150px;
    background: #ff9900;
}

.triAngl:before, .triAngl:after {
    content: "";
    position: absolute;
    left: 0;
    border-right: 0 solid transparent;
    border-left: 2000px solid transparent;
}

.triAngl:before {
    bottom: 100%;
    border-bottom: 50px solid #ff9900;
}

.triAngl:after {
    top: 100%;
    border-top: 50px solid #ff9900;
}

.inner {
    background: #2b2b2b;
}

最后，小提琴：Demo, remove "show" in url to view code.

Answer 2

您可以使用html画布将矩形图像剪切成您需要的梯形形状：

演示：http://jsfiddle.net/m1erickson/Mnkz3/

然后使用canvas.toDataURL（）创建一个可以在网页上定位的img元素。

// create a temporary canvas we can use to 
// make the clipped image
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");

var img=new Image();
img.crossOrigin="anonymous";
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/city-q-c-640-480-2.jpg";
function start(){
    var w=canvas.width=img.width;
    var h=canvas.height=img.height;
    ctx.save();
    ctx.moveTo(0,100);
    ctx.lineTo(w,70);
    ctx.lineTo(w,h);
    ctx.lineTo(0,h-30);
    ctx.closePath();
    ctx.stroke();
    ctx.clip();
    ctx.drawImage(img,0,0);
    ctx.restore();

    var newImg=document.createElement("img");
    newImg.src=canvas.toDataURL();
    document.body.appendChild(newImg);
}

或者，您可以使用如下重复模式填充剪裁区域：

var p=ctx.createPattern(img,"repeat");
ctx.fillStyle=p;
ctx.fill();