特殊形状的盒子边框

Question

我需要创建一个html框，它不仅仅是一个简单的框，但它底部有一个小尖端。我用HTML和CSS创建了这个，如下面的代码所示。先看一下。

＆＃13;

＆＃13;

.item{
  width: 200px;
  height: 130px;
  background: gray;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  float:left;
}
.title{
  position: absolute;
  bottom: 0px;
  background-color: white;
  height: 30px;
  line-height: 30px;
  width: 160px;
}
.tip{
  position: absolute;
  bottom: 0px;
  right: 0px;
  height: 30px;
  width: 40px;
  border-left: 25px solid transparent;
  border-bottom: 30px solid white;
}
*{
  box-sizing: border-box;
}

＆＃13;

<div class="item" style="background-image: url('http://img.dummy-image-generator.com/buildings/dummy-400x400-Window-plain.jpg')">
  <div class="title">Lorum Ipsum</div>
  <div class="tip"></div>
</div>

<div class="item" style="left:230px;">
  <div class="title">Lorum Ipsum 2</div>
  <div class="tip"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

如您所见，背景中的图像也位于底部的尖端。在右侧，您看到相同但没有图像和gray背景。但是，此背景实际上需要white，gray border背景轮廓中的gray。因此具有图像的版本也需要此边框。下面是我的意思的图像。

是否可以仅使用支持旧浏览器的HTML和CSS来创建它（至少是IE9）。提前谢谢！

Answer 1

这是一个适用于旧浏览器的解决方案;为了能见度，我将边框设为红色。

    .item{
  width: 200px;
  height: 130px;
  background: gray;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  float:left;
  border:1px solid red;
}
.title{
  position: absolute;
  bottom: -1px;
  left: -1px;
  background-color: white;
  height: 30px;
  line-height: 30px;
  width: 160px;
  border:1px solid red;
  border-width: 1px 1px 0 0;
}
.tip{
  position: absolute;
  bottom: -1px;
  right: -1px;
  height: 30px;
  width: 40px;
  border-left: 25px solid transparent;
  border-bottom: 30px solid white;
}
.tip-border{
    border-bottom-color:red;
    bottom:0;
}
*{
  box-sizing: border-box;
}

<div class="item" style="background-image: url('http://img.dummy-image-generator.com/buildings/dummy-400x400-Window-plain.jpg')">
  <div class="title">Lorum Ipsum</div>
  <div class="tip tip-border"></div>
  <div class="tip"></div>
</div>

<div class="item" style="left:230px;">
  <div class="title">Lorum Ipsum 2</div>
  <div class="tip tip-border"></div>
  <div class="tip"></div>
</div>

http://fiddle.jshell.net/2bgdjckq/