用css在图像上的中心箭头答案

【问题标题】：center arrow over img with css用css在图像上的中心箭头
【发布时间】：2018-08-15 08:18:23
【问题描述】：

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

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

【问题讨论】：

查看这个工具 - 它可能会为您指明正确的方向（请原谅双关语）：cssarrowplease.com

标签： css image css-shapes

【解决方案1】：

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

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

Your fiddle edited

【讨论】：

但现在我想从箭头左右获得灰色背景。
不想看到图片左右两边的箭头。
好的，现在你可以在 img 容器中放置一个前后伪元素作为示例。检查代码并告诉我。 jsfiddle.net/spyrosao/86e0gg99/13
我改了一些小东西，现在可以正常使用了。感谢您的帮助。

【解决方案2】：

您可以使用以下行：

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

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

.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');
    });
});

【讨论】：

【解决方案3】：

如果您只希望它水平居中，请将以下内容添加到 Arrow 的 CSS；

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

更新了小提琴。 https://jsfiddle.net/86e0gg99/12/

【讨论】：

我不想看到箭头的左边和右边的图片。我该怎么做？
对不起，我不确定你的意思

【解决方案4】：

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

【讨论】：