1)使用CSS3 3D变换

你尝试了这个，但没有工作。从你在问题中说的话，你在使用rotateY(它只会缩小)时发现的问题似乎是因为你没有将它与perspective结合起来。一旦你这样做了(并且用一些值来调整它们，到你想要的东西)，不仅div会偏斜，而且它的内容使它看起来像是与纸张效果相同的角度。

这是一个例子(also available on this JSFiddle)：

html,body { 
  background:#444; 
}

#columnwrapper2 { 
  min-width:700px; 
}

.slant { 
  margin:auto auto;  
}

#slant1 {
  width: 700px;
  height: 225px;
  background-color: white;
  font-family: thorndale for vst;
  font-size: 16px;
}

#slant2 {
  width:655px;
  height:225px;
  background:#eee;
  transform: perspective(600px) rotateX(-20deg);
}

#slant3 {
  width:668px;
  height:225px;
  background:#ddd;
  transform: perspective(600px) rotateX(20deg) translateY(-33px);
}

#slant4 {
  width:642px;
  height:225px;
  background:#eee;
  transform: perspective(600px) rotateX(-20deg) translateY(-33px);
}

<div id="columnwrapper2">
  <div id="slant1" class="slant">
    <div>
      Lorem ipsum dolor sit amet,consectetur adipiscing elit. Mauris mi odio,fermentum eget ex sed,tincidunt consectetur enim. Suspendisse viverra commodo ultrices. In eu facilisis leo,quis consectetur ex. Nam congue fringilla elit,ac mattis velit dictum ac. Donec tincidunt placerat ligula fermentum vulputate. Sed malesuada orci sit amet enim euismod,et euismod nunc pretium. Ut molestie et sem eu consectetur. Praesent fringilla elit enim,a convallis nulla sodales id. Sed tristique cursus libero. Cras ac magna id nisl pulvinar iaculis eu sit amet velit.
    </div>
  </div>
  <div id="slant2" class="slant">
    <div>
      <img src="http://lorempixel.com/500/200/people" alt="Random Picture" />
    </div>
  </div>
  <div id="slant3" class="slant">
    <div>
      Vivamus interdum facilisis justo ut fermentum. Cras turpis diam,efficitur sit amet mi sit amet,dapibus fermentum odio. Aenean fermentum tincidunt placerat. Vivamus dictum,diam quis elementum laoreet,lacus ex consectetur neque,eget fringilla ipsum neque nec sem. Ut eget venenatis urna,quis feugiat orci. Pellentesque vel interdum ante. Nulla blandit ex quam,non sollicitudin lectus laoreet nec. Integer vitae finibus elit. Duis pellentesque turpis odio,sit amet convallis libero blandit et. Maecenas accumsan est eros,vel scelerisque nulla scelerisque sit amet.
    </div>
  </div>
  <div id="slant4" class="slant">
    <div>
      Duis non placerat nisi,in maximus tellus. Nullam in interdum nunc,sed tempus nunc. Suspendisse lorem nisi,blandit vel odio ac,varius rhoncus sem. Phasellus quis placerat enim,id iaculis eros. Nunc at egestas nisi. Nulla in dui mattis,lacinia lectus ac,commodo ligula. Fusce fringilla vitae magna sit amet dignissim. Fusce quis elit elementum,faucibus eros id,facilisis mi. In vitae accumsan tellus. Quisque venenatis lacus urna,volutpat luctus eros feugiat id. Duis pretium pulvinar molestie. Nulla eget rhoncus sapien.
    </div>
  </div>
</div> <!--closes columnwrapper-->

2)使用SVG

另一个选择是使用SVG。这可能是一个更简单的选择，如果你不希望文本偏斜与折纸效果(或不需要玩数字)。它需要你知道每个部分的确切高度。

您可以在SVG中创建图像(直接作为图像或下面的代码)，并将其放在#columnwrapper2的背景中，其余的内容将放在图像的顶部。

看这个演示(also available on this JSFiddle)：

html,body { 
  background:#444; 
}

#columnwrapper2 {
  width:700px;
  position:relative;
}

.slant { 
  margin:auto auto;
  height:250px;
  width:600px;
  padding:50px auto;
  z-index:2;
  position:relative;
}

<div id="columnwrapper2">
  <svg width="700px" height="1000px" style="position:absolute;top:0;left:0;z-index:1;">
    <path fill="#ffffff" d="M0,0 700,250 0,250Z" />
    <path fill="#eeeeee" d="M0,250 700,250 650,500 50,500Z" />
    <path fill="#dddddd" d="M50,500 650,500 700,750 0,750Z" />
    <path fill="#eeeeee" d="M0,750 700,750 650,1000 50,1000Z" />
  </svg>
  <div id="slant1" class="slant">
    <div>
      Lorem ipsum dolor sit amet,volutpat luctus eros feugiat id. Duis pretium pulvinar molestie. Nulla eget rhoncus sapien.
    </div>
  </div>
</div> <!--closes columnwrapper-->

SVG的一个优点是大多数浏览器都支持(使用以前的转换解决方案，您可能会发现需要调整的IE的一些问题)。