图片上的中心箭头 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

您可以使用以下行：

  left: calc((100% - 60px)/2);

其中 60 px 是指箭头的宽度。不幸的是，并非所有浏览器都支持此方法。为了安全起见，将以下三行添加到 .t1_arrow class:

.t1-arrow {
    left: 45%;
    left: calc((100%-60px)/2);
    left: -webkit-calc((100%-60px)/2);
}

或者您可以使用 jquery 设置页面加载后的高度：

$(function() {
    $(".t1-arrow").each( function() {
        var w = $(this).parent(0).width();
        $(this).css('left',(w-60)/2 + 'px');
    });
});

Answer 2

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

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

Your fiddle edited

Answer 3

如果您只想让它水平居中，请将以下内容添加到 Arrow 的 CSS;

  left: 0; right: 0;
  margin: auto;

已更新 Fiddle。 https://jsfiddle.net/86e0gg99/12/

Answer 4

在这里你可以看到解决方案的图片，我正在寻找。 https://db.tt/1UFk3baW

图片上的中心箭头 css

center arrow over img with css

css

image

css-shapes