I am looking to design a unique HTML box that includes a little tip at the bottom. Using HTML and CSS, I have created this specific design shown in the code below. Take a look.
.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>The background image also extends into the tip at the bottom. On the right side, you can see a similar design without an image and with a gray background. However, the background should actually be white with a gray border outlining the gray background. This border is necessary for both versions, with and without the image. An illustration of this concept is provided below.
It seems feasible to create this layout using only HTML and CSS while ensuring compatibility with older browsers (at least IE9). Thank you in advance for your help!