里面有箭头的html框

Question

客户在他的网站上请求的框应该如下所示

正如您所看到的那样,盒子左侧有一个带有独特形状的小箭头.

我已经尝试了一切,并访问了很多链接,我无法设计它.

问题是,这个盒子有不同的大小,图像应该总是在盒子的中心,应该隐藏边框的一部分(你可以看到)

请帮忙,我在这里都没有选择.

谢谢Yasser

Answer 1

在这里,我为你做了小提琴:

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

在这里小提琴http://jsfiddle.net/y5dZj/

正如其他人所说:after和:before使用的

-edited:如果你想要在旧浏览器中完全兼容,不要使用转换.我的例子甚至可以在IE8中工作(不确定7)