CSS 响应式斜边

Question

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

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/

Answer 1

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

.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>

CSS 响应式斜边

CSS responsive slanted edge

html

css

twitter-bootstrap

css-shapes