CSS语音泡沫与完整的背景图像

Question

我知道简单地在元素的底部添加一个小三角形很容易,但我希望背景图像延伸到三角形中.我怎么能实现这个目标？

Answer 1

昨天我在这里回答了类似的问题:在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

对于更漂亮的东西,你也可以使用遮蔽和clip-path.