html – 覆盖另一图像的底部三角形图像

前端之家收集整理的这篇文章主要介绍了html – 覆盖另一图像的底部三角形图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
创建箭头 at the bottom of image很简单。

但是这可能是这样的,其中第二个图像不是背景,而是第一个图像之后的另一个图像:

我在codepen.io创建了“钢笔”

.wrap {
  position: relative;
  overflow: hidden;
  width: 70%;
  height: 200px;
  margin: 0 auto;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.arrow {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.arrow:before,.arrow:after {
  content: '';
  position: absolute;
  bottom: 100%;
  width: 50%;
  Box-sizing: border-Box;
}
.arrow:before {
  right: 50%;
  border-bottom: 20px solid #000;
  border-right: 20px solid transparent;
}
.arrow:after {
  left: 50%;
  border-bottom: 20px solid #000;
  border-left: 20px solid transparent;
}
<div class="wrap">
  <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
  <div class="arrow"></div>
</div>
<div class="wrap">
  <img src="http://i.imgur.com/EinPKO3.jpg" />
  <div class="arrow"></div>
</div>

解决方法

在您链接的答案中,有两种允许您正在查找的输出方法

如果您看第4种方法(工具提示在图像上有一个三角形)。显示的技术与您在悬停名称时使用的工具提示相同。

虽然这种方法有更好的浏览器支持,我更喜欢使用一个svg方法(也提供在您链接的帖子)与clipPath元素使三角形在底部

适应您的用例,可能如下所示:

*{margin:0;}
svg{
  display:block;
  position:relative;
  margin-bottom:-3.5%;
  z-index:50;
}
svg:nth-child(2){
  z-index:49;
}
svg:nth-child(3){
  z-index:48;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400">
  <defs>
    <clipPath id="clip">
      <path d="M0 0 H600 V380 H320 L300 400 L280 380 H0z" />
    </clipPath>
  </defs>
  <image xlink:href="http://lorempixel.com/output/people-q-g-600-400-1.jpg" width="600" height="400" clip-path="url(#clip)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400">
  <image xlink:href="http://lorempixel.com/output/nature-q-c-600-400-1.jpg" width="600" height="400" clip-path="url(#clip)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400">
  <image xlink:href="http://lorempixel.com/output/abstract-q-g-600-400-6.jpg" width="600" height="400" clip-path="url(#clip)"/>
</svg>

请注意,为简单起见,演示使用具有相同宽高比的图像。每个图像都有自己的svg标签,用于维护(例如:添加删除图像)

输出

关于MDN的更多信息

> clipPath
> svg

原文链接:https://www.f2er.com/html/232826.html

猜你在找的HTML相关文章