特殊形成的盒子邊框

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/