html - 特殊成型的框边框

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 背景。但是这个背景实际上需要是白色，在灰色背景的轮廓中有一个灰色边框。所以带有图像的版本也需要这个边框。下面是我的意思的图片。

是否可以仅使用 HTML 和 CSS 创建它并支持旧浏览器(至少 IE9)。提前致谢!

Answer 1

这是一种适用于旧浏览器的解决方案；为了 visibility ，我将边框设为红色。

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