特殊形成的盒子边框

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>

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

是否有可能只用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/