html - Facebook 三 Angular 箭头

Question

知道 Facebook 是如何做到这一点的吗？我试图在不牢固的背景上使用它，因此尝试使用 CSS 三 Angular 形覆盖图像的某些部分是行不通的。我想我可以尝试使用 border-image 但我没有得到任何结果。有什么想法吗？

Answer 1

尝试 this jsfiddle解决方案；)

Firefox 更新: http://jsfiddle.net/FSwx2/1/

HTML:

<div class="container">
    <div class="main-image">
            <div class="image-properties">
                <img class="image-fix" src="http://www.fujifilm.com/products/digital_cameras/xp/finepix_xp100/features/img/index/pic_02.jpg"/>
            </div>
    </div>
    <div class="triangle-image">
        <div class="deg-fix">
            <img class="image-fix" src="http://www.fujifilm.com/products/digital_cameras/xp/finepix_xp100/features/img/index/pic_02.jpg"/>
        </div>
    </div>
</div>

CSS:

.container {
    height: 137px;
    left: 0;
    position: relative;
    top: 20px;
    width: 370px;
}
.main-image {
    height: 137px;
    overflow: hidden;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.25);
}
.image-properties {
    height: 159px;
    position: relative;
    top: -11px;
    width: 370px;
    overflow: hidden;
}
.triangle-image {
    border-left: 1px solid rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(0, 0, 0, 0.25);
    display: block;
    height: 15px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 15px;
    -webkit-transform: translate(24px, -12px) rotate(45deg);
    -webkit-transform-origin: 0 0;
}
.deg-fix {
    width: 370px; 
    height: 159px; 
    -webkit-transform: rotate(-45deg) translate(-24px, 0px);
    -webkit-transform-origin: 0 0;
    top:0;
}
.image-fix {
    left:-31px; 
    top:0px;
    width:432px;
    height:160px;
}