html - 带有箭头的 html 框

Question

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

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

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

问题是，这个盒子会有不同的大小，并且该图像应该始终位于盒子的中心并且应该隐藏一部分边框（如您所见）

请帮忙，我在这里没有选择。

谢谢你，亚瑟

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）

Answer 2

习惯了这个

CSS

 div{
    position:relative;
      width:200px;
      height:200px;
      background:red;
    }
    div:after{
    content:'';
      position:absolute;
      left:-10px;
      top:50%;
      margin-top:-10px;
      width:20px;
      height:20px;
      background:#fff;
      transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
    }

HTML

<div></div>

演示

Answer 3

这是您可以做到的一种方法：http: //jsfiddle.net/vKY3x/

<div>
    <span></span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus varius felis, sit amet malesuada urna euismod convallis. Donec at diam eros
</div>

div {
    position:relative;
    width:300px;
    padding:30px;
    border:1px solid #ccc;
}

div span {
    display:block;
    width:20px;
    height:20px;
    background:#666;
    position:absolute;
    left:-1px;
    top:50%;
    margin-top:-10px;
}

Answer 4

HTML

<div></div>​

CSS

div {
    margin:20px;
    height: 120px;
    width: 250px;
    background-color: #ededed; 
    border:#ccc solid 1px;
    position:relative;
}
div:after{
    content:'';
    width:20px;
    height:20px;
    background:#fff;
    position:absolute;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    top:42%;
    left:-11px;
    border-right:#ccc solid 1px;
    border-top:#ccc solid 1px;
} ​

现场演示