如何用背景重复创建梯形div

Question

我想在像下面的图像一样的div中制作像这样的图像背景。 但我无法找到任何适当的css或js属性。 任何人都可以帮助找出这可能吗？

Answer 1

看起来像CSS 3D变换。这是webkit的做法，根据需要调整角度和视角。你必须为其他浏览器找到相同的东西，我认为它还没有完全标准化。

只需将此CSS应用于您的div与背景图像。我在这个页面顶部用可爱的stackoverflow标志测试了这个，这是一个带有背景图片的div。

编辑：在这里，也是一个红色边框。不知道它的图像的一部分，或者你也需要CSS。

-webkit-transform: perspective(500) rotateY(-60deg); 
border: 3px red solid; 

Answer 2

它会帮助你

变换的CSS属性

http://www.w3schools.com/cssref/css3_pr_transform.asp

Answer 3

我找到了一个很好的解决方案，并解决了机柜龙的帮助，像以下各项

问题

HTML代码

<div id="div1"> 
<div id="div2">HELLO</div> 
</div> 

CSS代码

#div2 { 
    background: url("") repeat scroll 0 0 rgba(0, 0, 0, 0); 
    border: 1px solid #000000; 
    padding: 50px; 
    position: absolute; 
    transform: rotateY(-234deg); 
} 

#div1 { 
    border: 1px solid #000000; 
    height: 150px; 
    margin: 50px; 
    padding: 10px; 
    perspective: 89px; 
    position: relative; 
    width: 150px; 
}