Question

我需要在图像上使用三角形div边界的crossbrowser解决方案。也许我应该使用“画布”或其他东西。主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三角形边框的图像

1 个答案: