我想在图像上显示一个箭头。此箭头每次都应居中。我该怎么做呢?
下面是我用jsfiddle编写的代码
CSS:
.t1_img {
background-image:url('http://www.4freephotos.com/medium/batch/Branch-of-acacia-with-flowers777.jpg');
position: relative;
background-size: cover;
background-position: center center;
overflow: hidden;
border-radius: 10px 0 0 0;
height: 200px;
}
.t1_arrow {
position: absolute;
bottom: 0;
width: 60px;
border-left: 40px solid #cfcfcf;
border-right: 40px solid #cfcfcf;
border-top: 20px solid transparent;
}
.t1_content {
background-color: #cfcfcf;
height: 150px;
padding-top: 20px;
margin-bottom: 40px;
}
HTML:
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
</div>
</div>
https://stackoverflow.com/questions/36357872
复制相似问题