如何实现带有CSS的IMG上方的中心箭头?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (168)

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

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>
提问于
用户回答回答于

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

 .t1_arrow {left:50%;margin-left:-30px;}
用户回答回答于

你可以使用以下行:

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

其中60 px指的是箭头的宽度。 遗憾的是,并非所有浏览器都支持此方法。 为安全起见,请将以下三行添加到.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');
    });
});

扫码关注云+社区

领取腾讯云代金券