html - 边框内的图片

Question

我使用以下 CSS 代码创建了一个三 Angular 形。

    width: 0; 
    height: 0; 
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;      
    border-top: 60px solid #000;

这个边框的背景颜色是黑色的，正如我提到的 #000 但现在我需要这个三 Angular 形内的图像。我尝试使用 background-image 属性向 CSS 添加另一行，但这样做是在方形背景而不是矩形背景中显示完整图像。

如何用我需要的图像显示三 Angular 形。

Answer 1

可以是this example之类的东西吗？做什么？

样式表:

div {
    width: 0; 
    height: 0; 
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;      
    border-top: 60px solid #000;
    position: relative;
}
div::after {
    content: "";
    background: url('http://lorempixel.com/40/40/'); no-repeat;
    width: 40px;
    height: 40px;
    position: absolute;
    top: -60px;
    left: -20px;    
}​