CODEWITHSUNDEEP
htmlcssfacebook
user3047675
user3047675

Reputation: 82

Facebook triangle arrow

enter image description here

Any idea how Facebook does this? I'm trying to use it on backgrounds that aren't solid so trying to cover parts of the image using the CSS Triangles aren't going to work. I figured I could try using border-image but I'm not getting anywhere. Any ideas?

Upvotes: 0

Views: 225

Answers (2)

mandel99
mandel99

Reputation: 124

Try this jsfiddle solution ;)

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

Upvotes: 1

Kheema Pandey
Kheema Pandey

Reputation: 10265

you can achieve this effect using :after or :before pseudo selector. Here is a Demo. and 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;
}

Upvotes: 1

Related Questions