三角形塊沒有拉伸全寬

我有一個問題，在圖像的頂部創建一個長的尖銳三角形框，以便創建一個圖像被略微切斷的效果。就像這樣：三角形塊沒有拉伸全寬

我使用下面的CSS嘗試：

.overlay{ 
    background-image: linear-gradient(10deg, lightblue 50%, transparent 50%); 
    height: 165px; 
    width:100%; 
}

觀看演示在這裏：CODEPEN

但你可以在藍方沒有延伸到CodePen內看到全屏寬度。我不想應用旋轉和東西等方法。任何人都可以引導我進入正確的方向嗎？

來源

2017-03-03 Rotan075

這是你想要的嗎？ http://codepen.io/anon/pen/peyYVq –

@ElmerDantas是的！完善。謝謝！在您的解決方案，然後我可以接受爲答案 – Rotan075

請在問題本身[mcve]中提供所有相關代碼，而不是在第三方網站上。 –

這裏

.overlay{ 
    background-image: linear-gradient(-2deg, lightblue 45%, transparent 45%); 
    height: 165px; 
    width:100%; 
    bottom: 0; 
    position: absolute; 
}

Codepen

親切的問候

來源

2017-03-03 15:48:40

你需要玩的度量和你的梯度百分比：你想要什麼

.fixedheight { 
 
    height: 590px; 
 
    background-image: url(http://www.kaylainthecity.com/wp-content/uploads/gym.jpg); 
 
    background-size: cover; 
 
    background-position: center; 
 
    position: relATIVE; 
 
} 
 

 
.overlay { 
 
    POSITION: ABSOLUTE; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-image: linear-gradient(-3deg, lightblue 55%, transparent 56%); 
 
    height: 165px; 
 
    width: 100%; 
 
}

<div class="container-fluid"> 
 
    <div class="row fixedheight"> 
 
    <div class="pic"></div> 
 
    <div class="overlay"></div> 
 
    </div> 
 
</div>

Updated Pen

來源

2017-03-03 15:41:33 Pete

三角形塊沒有拉伸全寬

回答

相關問題