在背景图象的倾斜的div角落

Question

我正在尝试在div的左上角创建一个覆盖背景图像的透明边框。我发现这篇文章：Boxes with folded corner and box shadow over an unpredictable background这与我想要达到的目标很接近，除了我无法得到公认的答案。

附件是我到目前为止的屏幕截图。你会注意到左上角略带灰色的三角形。该区域应该是透明的，以便您可以看到它背后的背景图像。

这是我现在的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;
}

如何让指定的角在背景图像上透明而不是div？

Answer 1

你最好的选择是渐变背景

例如：

.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