如何使用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.