Question

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

Answer 1

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)