背景图像上的倾斜 div 角答案

【问题标题】：Slanted div corner over background image背景图像上的倾斜 div 角
【发布时间】：2014-03-05 19:02:17
【问题描述】：

我正在尝试在覆盖背景图像的 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 上透明？

【问题讨论】：

请用JSfiddle，但是你不能做一个会影响父母不透明度的覆盖。

标签： css background-image pseudo-element

【解决方案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

【讨论】：