特殊成型盒边框

Question

我需要创建一个html框，它不仅是一个简单的框，而且在底部有一个小提示。我用HTML和CSS创建了它，正如您在下面的代码中所看到的那样。先看那个。

​

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

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

​

如您所见，背景中的图像也在底部的提示中。在右边，您看到的是相同的，但没有图像和gray背景。但是这个背景实际上需要是white，在gray背景的轮廓中有一个gray border。因此，带有图像的版本也需要这个边框。下面是我的意思。

​

​

是否可以只使用支持旧浏览器(至少是IE9)的HTML和CSS来创建这些浏览器。提前感谢！

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/