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

Это должно работать для вас. Опять же, я использовал псевдоэлемент, чтобы изменить цвет, но общий консенсус тот же. И связанный вопрос, и это использование переполнения: скрытые на родительском и, следовательно, не будут прокручиваться. Что касается вращающихся, так как я использовал псевдо элемент, это не должна быть проблемой:

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