css - 带有CSS的图像的中心箭头

Question

我想在图片上显示一个箭头。这个箭头每次都应该居中。 我该怎么做？

这是我在 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>

Answer 1

你知道箭头的宽度，所以如果你把它放在左边:50%；和 margin-left:-30px;因为它的宽度是 60px，所以它每次都居中。 所以添加这个

 .t1_arrow {left:50%;margin-left:-30px;}

Your fiddle edited