简体   繁体   English

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

[英]Image with bottom triangle that overlay another image

It is simple to create arrow at the bottom of image . 在图像底部创建箭头很简单。

But is this possible to achive something like this where second image is not background but another image that goes after first image: 但是,如果第二张图像不是背景而是第一张图像之后的另一张图像,这是否可能达到这样的效果: 图像底部三角形图像

I created "pen" on codepen.io 我在codepen.io上创建了“pen”

 .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> 

In the answer you linked to there are 2 approaches that allow the output you are looking for. 在您链接的答案中,有两种方法可以提供您正在寻找的输出。

If you look under the 4th approach (Tooltip with a triangle over an image.) the technique shown is the same as what facebook uses for tooltips when you hover a name. 如果你看第4种方法(在图像上有一个三角形的工具提示。),显示的技术与当你悬停名字时facebook用于工具提示的技术相同。

在非普通内容上使用三角形的工具提示

Although this approach has a better browser support, I would prefer to use an svg approach (also provided in the post you linked to) with the clipPath element to make the triangle at the bottom. 虽然这种方法有更好的浏览器支持,但我更喜欢使用svg方法(在链接的帖子中也提供)和clipPath元素,以使三角形位于底部。

Adapted to your use case, it could look like this : 适应您的用例,它可能如下所示:

 *{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/600/400/people/1" 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/600/400/nature/1" 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/600/400/abstract/6" width="600" height="400" clip-path="url(#clip)"/> </svg> 

Note that for simplicity the demo uses images with the same aspect ratio. 请注意,为简单起见,演示使用具有相同宽高比的图像。 Each image is in its own svg tag for maintainability (example: add or remove an image) 为了可维护性,每个图像都在自己的svg标记中(例如:添加或删除图像)

Output : 输出:

底部三角形在另一个图像上的图像

More info on MDN : 有关MDN的更多信息:

hi i haven't show you code deeply but as per your desired out put image 嗨,我没有向您展示深度代码,但根据您所需的输出图像

i have created following in my way and here it is the code of that 我已经按照自己的方式创建了以下内容,这里是代码

Please Note : This will not work with the Internet Explorer and FireFox 请注意 :这不适用于Internet Explorer和FireFox

In FireFox clip-path support by the only url value 在FireFox剪辑路径支持中唯一的url值

for browser support please look at following reference link 有关浏览器支持,请查看以下参考链接

Browser Support for clip-path 浏览器支持剪辑路径

 .boundry{ margin-top:100px; margin-left:100px; width:50%; margin-bottom:100px; } .arrow_box { height:180px; position: relative; background: #88b7d5; padding:15px; text-align:center; color:white; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 46% 80%, 51% 90%, 56% 80%, 0% 80%); clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 46% 80%, 51% 90%, 56% 80%, 0% 80%); } .arrow_box:nth-child(1){ background:url('http://3.bp.blogspot.com/-lz3nDbV440A/VO4QpcN4ZCI/AAAAAAAAN94/PAYUtUysb-4/s1600/happy-holi-images-2015%2B(9).jpg'); color:grey; z-index: 5; } .arrow_box:nth-child(2){ margin-top: -42px; margin-bottom: -35px; background:url('http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg'); } 
 <div class="boundry" > <div class="arrow_box"> <h1 class="logo">first image</h1> </div> <div class="arrow_box"> <h1 class="logo">second image</h1> </div> </div> 

and here is the working demo code for this 这是这个的工作演示代码

Demo Code 演示代码

If you want to stack images you have many different methods to use. 如果要堆叠图像,可以使用许多不同的方法。 You can always use the z-index to put them in different orders. 您始终可以使用z-index将它们放在不同的顺序中。 You can use .png files to add contrast to the layout. 您可以使用.png文件来增加布局的对比度。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM