CSS responsive slanted edge

问题

I'm creating a basic webpage, but for the footer there is going to be a slanted edge that will run at the bottom of the page. Where I am having issues as you are unable to add 100% on a border, as i am using bootstrap, so the page must be responsive. Is there a way to achieve this affect whilst being responsive.

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/

回答1:

This should work for you. Again, I've used a pseudo element in order to alter the color, but the general consensus is the same. Both the linked question and this use overflow:hidden on the parent and hence won't scroll. As for rotating, since I've used a pseudo element, this should not be an issue:

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

来源：https://stackoverflow.com/questions/28434458/css-responsive-slanted-edge