底部三角形覆蓋另一個圖像的圖像

Question

在圖像底部創建箭頭很簡單。

但是，如果第二張圖像不是背景而是第一張圖像之后的另一張圖像，這是否可能達到這樣的效果：

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

Answer 1

在您鏈接的答案中，有兩種方法可以提供您正在尋找的輸出。

如果你看第4種方法（在圖像上有一個三角形的工具提示。），顯示的技術與當你懸停名字時facebook用於工具提示的技術相同。

雖然這種方法有更好的瀏覽器支持，但我更喜歡使用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/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> 

請注意，為簡單起見，演示使用具有相同寬高比的圖像。 為了可維護性，每個圖像都在自己的svg標記中（例如：添加或刪除圖像）

輸出：

有關MDN的更多信息：

• clipPath
• SVG

Answer 2

嗨，我沒有向您展示深度代碼，但根據您所需的輸出圖像

我已經按照自己的方式創建了以下內容，這里是代碼

請注意 ：這不適用於Internet Explorer和FireFox

在FireFox剪輯路徑支持中唯一的url值

有關瀏覽器支持，請查看以下參考鏈接

瀏覽器支持剪輯路徑

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

這是這個的工作演示代碼

演示代碼

Answer 3

如果要堆疊圖像，可以使用許多不同的方法。 您始終可以使用z-index將它們放在不同的順序中。 您可以使用.png文件來增加布局的對比度。