Borda inclinada responsiva ao CSS
Estou criando uma página da Web básica, mas para o rodapé haverá uma borda inclinada que será executada na parte inferior da página. Onde estou tendo problemas, já que você não consegue adicionar 100% em uma borda, como estou usando o bootstrap, portanto a página deve ser responsiva. Existe uma maneira de conseguir esse efeito enquanto responde?
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;
}