背景图像倾斜的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角落

回答

相关问题