背景圖像傾斜的div角落

我想在覆蓋背景圖像的div的左上角創建一個透明邊框。我發現這個職位：Boxes with folded corner and box shadow over an unpredictable background這是接近我想要實現的，除了我無法得到接受的工作回答。背景圖像傾斜的div角落

附加是我到目前爲止的屏幕截圖。你會注意到左上角的灰色三角形。該區域應該是透明的，以便您可以看到背後的背景圖像。

enter image description here

這是我目前的CSS，這已經得到了我我現在身在何處：

.interior-banner .subnav { 
    background-color: rgb(0,0,51); 
    background-color: rgba(0,0,51,.8); 
    border: 0; 
    height: 240px; 
    margin-top: 20px; 
    padding: 30px 20px 20px; 
    -moz-background-clip: padding; 
    -webkit-background-clip: padding; 
    background-clip: padding-box; 
} 
.interior-banner .subnav:before { 
    content: ''; 
    position: absolute; 
    display: block; 
    top: 0; 
    left: 0; 
    z-index: 999; 
    border-top: 20px solid rgba(255, 255, 255, 0.3); 
    border-right: 40px solid transparent; 
}

我怎樣才能獲得指定角是在背景圖像，而不是股利透明？

來源

2014-03-05 Ty Bailey

的jsfiddle請，但你不能讓一個覆蓋會影響父母的不透明度。 –

你最好的賭注是一個漸變背景

例如：

.interior-banner .subnav { 
    background: linear-gradient(145deg, rgba(0,0,151, 0.5) 50px, rgb(0,0,151) 50px); 
    border: 0; 
    height: 240px; 
    margin-top: 40px; 
    margin-left: 40px; 
    padding: 30px 20px 20px; 
    background-clip: padding-box; 
}

fiddle

來源

2014-04-26 07:54:10 vals

背景圖像傾斜的div角落

回答

相關問題