Facebook三角箭头

Question

知道Facebook如何做到这一点？我尝试在不坚固的背景上使用它，因此尝试使用CSS三角形覆盖图像的某些部分是不可行的。我想我可以尝试使用边框图像，但我没有到达任何地方。有什么想法吗？

Answer 1

您可以使用:after或:before伪选择器实现此效果。这是 Demo 。和 updated Demo

div{
width:200px;
height:100px; 
background:gray;
position:relative;
top:20px;
}

div:after
{
content: ""; 
position:absolute;
top:-15px; 
left:0; 
width:0px;
height:0px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid gray;
}

Answer 2

尝试this jsfiddle解决方案;）

for Firefox的UPDATE ： 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;
}