具有完整背景圖像的CSS對話框

Question

我知道只需在元素的底部添加一個小三角形就很容易，但我希望背景圖像可以伸展到三角形中。我怎麼能做到這一點？

Answer 1

在這裏，我剛纔已經回答是這樣的昨天：Creating a transparent arrow above image in CSS3

但其底部的三角形，你會做這樣的事情：

.image { 
    position:relative; 
    height:200px; 
    width:340px; 
    background:orange; 
} 
.image:before, .image:after { 
    content:''; 
    position:absolute; 
    height:0; 
    border-bottom:20px solid white; 
    bottom:0; 
} 
.image:before { 
    left:0; 
    width:20px; 
    border-right:16px solid transparent; 
} 
.image:after { 
    left:36px; 
    right:0; 
    border-left:16px solid transparent; 
} 

和DEMO

對於一些你可以使用masking和clip-path。