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

Question

我想在div中制作像这样的图像背景，如下图所示。 但我找不到任何合适的css或js属性。 有人可以帮忙找出这可能吗？

Answer 1

看起来像CSS 3D Transforms。这是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

我找到了一个很好的解决方案并在Cubicle Dragon的帮助下解决了这个问题，如下 -

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;
}