1

我知道在元素底部添加一个小三角形很容易，但我希望背景图像延伸到三角形中。我怎么能做到这一点？

4

1 回答 1

5

这里我昨天刚刚回答了这样的问题：在 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.

于 2013-05-15T09:35:53.263 回答