Question

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

box appearance

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

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

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

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

谢谢你，亚西尔

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>

<强> Demo

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

<强> LIVE DEMO

里面有箭头的html框

4 个答案: