在圖像底部遮蓋出三角形

Question

試圖從內部圖像遮蔽底部的三角形。 （我想看看在三角形的圖像）的水平在中間朝下

HTML

<div id="last-img"> 
    . . . image here . . . 
</div> 

CSS

#last-img { 
    position: relative; 
    overflow: visible; 
    border-bottom: 10px solid white; 
    border-color: white transparent white white; 
} 

#last-img::before, 
#last-img::after { 
    content: ''; 
    display: block; 
    position: absolute; 
    bottom: -10px; 
    right: -10px; left:auto; 
    border: 10px solid white; 
    border-color: transparent transparent white transparent; 
} 

#last-img::before { 
    top: -10px; 
    bottom: 50%; 
} 

#last-img::after { 
    top: 50%; 
    bottom: -10px; 
} 

Answer 1

我想你想是這樣的。

body { 
 
    text-align: center; 
 
} 
 
div { 
 
    display: inline-block; 
 
    margin: 2em; 
 
    position: relative; 
 
    background: #000; 
 
} 
 
div::before { 
 
    content: ''; 
 
    width: calc(50% - 20px); 
 
    border: 12px solid grey; 
 
    position: absolute; 
 
    bottom: 0; 
 
    border-color: white transparent; 
 
    border-width: 0 20px 20px 0; 
 
} 
 
div::after { 
 
    content: ''; 
 
    width: calc(50% - 20px); 
 
    border-style: solid; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    border-color: white transparent; 
 
    border-width: 0 0 20px 20px; 
 
}

<div> 
 
    <img src="http://www.fillmurray.com/460/300" alt="" /> 
 
</div>

Answer 2

對於單個，純色三角形，僅需要一個僞元件（之前或之後，請選擇）。

#last-img { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
#last-img::after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 0 0 10px 10px; 
 
    border-color: transparent transparent #fff transparent; 
 
}

<div id="last-img"> 
 
    <img src="http://dummyimage.com/100x100/000/fff" /> 
 
</div>