如何使用画布或css制作这种“垂直裁剪图像”？

Question

我在一些网站的顶部看到了css效应，就像“水平垂直裁剪”一样，它是用css (边框颜色和边框)来完成的。

但是我怎么能用背景图像代替颜色来做同样的事情呢？(在下面的图片中解释得更好)

解释

原始网站链接：这里

我可以用画布或css来做吗？提前谢谢你！

Answer 1

您可以使用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();

Answer 2

这里有一个纯粹的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;
}

最后，小提琴：演示，删除url中的“显示”以查看代码。