尝试从里面的图像中屏蔽底部三角形。 (我希望看到三角形中的图像)中间水平向下
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;
}
答案 0 :(得分: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>
答案 1 :(得分:0)
对于单个纯色三角形,只需要一个伪元素(在选择之前或之后)。
#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;
}
&#13;
<div id="last-img">
<img src="http://dummyimage.com/100x100/000/fff" />
</div>
&#13;