在Div上偏斜的边界

Question

我试图扭曲一个div,类似于这个: 使用css倾斜div的顶部而不会扭曲文本 或者:http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3 /

这是我想要做的事情的图像:

基本上,我需要在所有四个方面以奇怪的方式倾斜边界.我可以用背景图像做到这一点,但我更喜欢用CSS做一些方法,所以div可以在宽度和高度上做出响应.我想找到一个适用于旧浏览器的解决方案,但我知道我不能拥有一切!

在所有4个边上都有倾斜边框的最佳方法是什么？(注意:绿色框底部的边框在中间向下倾斜,在外部向下倾斜,我不需要边框就可以做到这一点.只需向一个方向倾斜即可.)

Answer 1

我能够做出非常相似的东西..它适用于所有现代浏览器.

HTML - 非常简单

div:nth-child(1) {
  background: rgb(122, 206, 122);
  height: 140px;
  transform: skew(-10deg) rotate(2deg);
  -webkit-transform: skew(-10deg) rotate(2deg);
  -moz-transform: skew(-10deg) rotate(2deg);
}

div:nth-child(1) p {
  transform: skew(10deg) rotate(-2deg);
  -webkit-transform: skew(10deg) rotate(-2deg);
  -moz-transform: skew(10deg) rotate(-2deg);
  padding: 3% 2%;
}

div:nth-child(2) {
  border-bottom: 180px solid rgb(233, 233, 65);
  border-left: 8px solid transparent;
  border-right: 14px solid transparent;
  height: 0;
  margin-top: 60px;
  transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
}

div:nth-child(2) p {
  transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  padding: 3.5% 3%;
}

div:nth-child(3) {
  border-top: 140px solid rgb(253, 74, 74);
  border-left: 23px solid transparent;
  border-right: 14px solid transparent;
  height: 0;
  margin-top: 20px;
  transform: rotate(2deg);
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
}

div:nth-child(3) p {
  transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  position: absolute;
  top: -140px;
  padding: 3% 3%;
}

div:nth-child(3):before {
  content: '';
  width: 124%;
  height: 80px;
  background: white;
  position: absolute;
  left: -20%;
  bottom: 120px;
  transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
}

<div>
  <p>text..</p>
</div>

<div>
  <p>text..</p>
</div>

<div>
  <p>text..</p>
</div>

全屏演示 ---- jsFiddle演示