CSS 响应式斜边答案

【问题标题】：CSS responsive slanted edgeCSS 响应式斜边
【发布时间】：2015-02-11 00:16:44
【问题描述】：

我正在创建一个基本网页，但对于页脚，将有一个倾斜的边缘将在页面底部运行。在我遇到问题的地方，因为您无法在边框上添加 100%，因为我正在使用引导程序，所以页面必须是响应式的。有没有办法在响应的同时实现这种影响。

div {
 width:200px;
 height:80px;
 background: red;
 top:150px;left:100px;
 position: relative;
}

div:before {
 content: '';
 position: absolute;
 top: 40px; right: 0;
 border-right: 200px solid white;
 border-top: 40px solid red;
 width: 20;
}

http://jsfiddle.net/2bZAW/3675/

【问题讨论】：

Is it possible to create a sheared div?的可能重复
相同的概念，但是当在原始 div 和下面的文本中使用文本时，它也没有响应，因为容器将是 130% 宽度
您能否通过更新您的问题来解释这有何不同？也许使用“预期结果”的图像？甚至是图表？
在 jsfiddle 上更新它以使其更准确。
jsfiddle 已更新。它与您提供的链接的概念相同，但 div 的宽度是 100%，因此不需要在 x 轴上滚动。也可以旋转内容也可以旋转

标签： html css twitter-bootstrap css-shapes

【解决方案1】：

这应该适合你。同样，我使用伪元素来改变颜色，但普遍的共识是相同的。链接的问题和这个都使用溢出：隐藏在父级上，因此不会滚动。至于旋转，由于我使用了伪元素，这应该不是问题：

.wrap {
  height: 500px;
  width: 100%;
  display: inline-block;
  position: relative;
  overflow: hidden;
  z-index: 8;
}
.wrap:after {
  content: "";
  position: absolute;
  height: 130%;
  width: 100%;
  transform: skewY(-4deg);
  background: tomato;
  top: -50%;
  z-index: -2;
  left: 0;
}
.lower {
  position: absolute;
  bottom: 15%;
  right: 0;
}

<div class="wrap">
  Hello, World!
  <div class="lower">Wanted text here?</div>
</div>

【讨论】：