html box with arrow inside

css, css-shapes, html

Solution

Here I made fiddle for you:

<div class="box"></div>

.box{
    border:solid 1px black;
    position:relative;
    display:block;
    height:100px;
    width:100px;
    margin-left:5px;
}
.box:before{
    content:"";
    display:inline-block;
    position:absolute;
    border:10px solid black;
    border-color:transparent transparent transparent black;
    top:40px;
}
.box:after{
    content:"";
    display:inline-block;
    position:absolute;
    border:9px solid white;
    border-color:transparent transparent transparent white;
    top:41px;
    left:-1px;
}

Fiddle here http://jsfiddle.net/y5dZj/

As others told `:after` and `:before` used

-edited: Dont use transform if you want full compatibility in old browsers. My example will work even in IE8(not sure about 7)

Problem

A client is requesting boxes on his website that should appear like the one below as you can see, the box has a small arrow with a unique shape on the left hand side. I have tried everything and visited lots of links and i can't design it. the problem is, this box will have different sizes and that image should always be in the center of the box and should hide a portion of the border (as u can see) please help, i am all out of options here. Thank you, Yasser

Original source