css - 背景图片上的倾斜 div Angular

Question

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

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

这是我当前的 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;
}

如何让指定的 Angular 在背景图像而不是 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