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

Question

我曾经在一些网站的一些顶部页面部分看到在同一部分的顶部有一个css效果，就像用一些css（border-color & border-stile）完成的“horizo​​ntal-vertical-crop”。

但我怎么能做到相同的背景图像，而不是颜色？ （解释下面的图片更好）

Explanation

原址链接：here

我可以用帆布或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; 
} 

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