CSS 图像的三角形边框

Question

我需要图像三角形 div 边框的跨浏览器解决方案。也许我应该使用 "canvas" 或其他东西。 Main div 必须有自动高度和图像始终在固定位置。

.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;
}

CSS 图像的三角形边框

CSS triangular border over of the image

html

css

html5-canvas