在图像上方的CSS三角形边框

Question

我需要跨越图像的三角形div边框的交叉浏览器解决方案。也许我应该使用“画布”或其他东西。主格必须具有自动高度和图像始终在固定位置。

Final result

.border { 
 
    width: 600px; 
 
    border: 3px solid blue; 
 
    min-height: 400px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.border_image{ 
 
    float: right; 
 
    background: url("http://assets.worldwildlife.org/photos/35/images/circle/Macaw_circle_image_(c)_Zig_Kock_WWF.jpg?1345562675") no-repeat; 
 
    width:150px; 
 
    height:150px; 
 
    position: absolute; 
 
    right:-20px; 
 
    
 
}

<div class="border"> 
 
    <div class="border_image"></div> 
 
</div>

Answer 1

可能难以只用CSS。在你的情况下，我会创建一个图像来覆盖你的容器的正确部分。我用css做了这个：FIDDLE但它不是一个完美的解决方案，因为我似乎无法完美地加入我用过的不同部分。放大和缩小会稍微混乱。反正我有一些有趣使它即使这个答案可能是无效的：

CSS：

.right { 
    height: calc(100% - 24px); 
    border-left:3px solid blue; 
    width:40px; 
    position:absolute; 
    right:-40px; 
    top:24px; 
    background-color:white; 
} 
.right:before { 
    content:' '; 
    display:inline-block; 
    width: 30px; 
    height: 20px; 
    position:absolute; 
    top:-5.5px; 
    left:0px; 
    transform: rotate(45deg); 
    border-left:3px solid blue; 
    background-color:white; 
} 
.right:after { 
    content:' '; 
    display:inline-block; 
    width: 30px; 
    height: 20px; 
    position:absolute; 
    top:-39px; 
    left:0px; 
    transform: rotate(-45deg); 
    border-left:3px solid blue; 
    background-color:white; 
}