里面有箭头的html框

Question

一位客户要求在他的网站上显示如下所示的框

如您所见，该框的左侧有一个形状独特的小箭头。

我已经尝试了所有方法并访问了很多链接，但我无法设计它。

问题是，这个框将有不同的大小，图像应该总是在框的中心并且应该隐藏边框的一部分(如你所见)

请帮忙，我在这里别无选择。

谢谢，亚瑟

Answer 1

我在这里为你制作了 fiddle :

<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 http://jsfiddle.net/y5dZj/

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

-edited:如果你想在旧浏览器中完全兼容，请不要使用转换。我的示例甚至可以在 IE8 中运行(不确定 7)