div中的背景

Question

我通过塑造一个div来为我的网站的标题做了一个颠倒的三角形。这是CSS。

.triangle{ 
width: 0; 
height: 0; 
border-style: solid; 
border-width: 100px 49vw 0 49vw; 
margin-top:-8px; 
border-color: gray transparent transparent transparent; 
width:0; 
height:0; 

}

代替灰色作为背景色，我想插入符合三角形的图像。有没有人有任何想法？

感谢 亚历克

Answer 1

演示 - http://jsfiddle.net/euppwbub/

可以使用pseudo元素:after并隐藏外的额外内容与border

，但你需要给height和background-image为.triangle

.triangle { 
 
    background: url(http://dummy-images.com/abstract/dummy-480x270-Rope.jpg); 
 
    width: 100%; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 
.triangle:after { 
 
    content: ''; 
 
    border-style: solid; 
 
    border-width: 100px 50vw 0vh 50vw; 
 
    border-color: transparent white; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    position: absolute; 
 
}

<div class="triangle"></div>

Answer 2

你不能设置背景图片，如果宽度为0它永远不会是可见的。除了创建三角形并显示图像外，您还可以在普通的div中显示三角形图像。我知道这并不能真正回答这个问题，但这就是你如何去做的方式。

Answer 3

而是一个三角形，显示的图像，你可以做一个常规的DIV，显示图像，然后掩盖它的一部分与另两个三角形的div指向其他的方式来掩盖它。

所以，你会有你的图像div，然后使用定位，你有一个白色的三角形指向与顶部点与div的左边齐平，另一个定位在div的最右边的顶点。

不是超实用，但它达到了你想要的效果。

你或许应该只使用已经在一个三角形的形状，除非你打算使用不同的图片来自用户，例如，你不必手工编辑一条可行之路的图像。