Olá!

Gostaria de usar o recurso de skew() para criar sections inclinadas como essas desse site:

https://www.eitodos.com.br/

Porém vi que o recurso skew() não é o mais utilizado, porque entorta o texto também. Encontrei repetidas vezes um código com border-bottom e left com uso do :before. Porém não consigo entender como as borders sem width e height foram renderizadas:

<style>
.container {
  width: 400px;
  margin: 100px auto 0;
  background: red;
  padding: 20px;
  color: white;
  position: relative;
}

.container:before {
  content: '';
  width: 0; 
  height: 0; 
  border-left: 440px solid transparent; 
  border-bottom: 50px solid red;
  position: absolute;
  bottom: 100%;
  left: 0;
}
</style>

<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae ipsa tenetur dolores impedit iure ab quos dolore unde veritatis optio debitis maxime ad nesciunt sequi officia earum repellat itaque maiores.</div>

Alguém consegue me ajudar a entender? E caso conheçam alguma solução com o skew() sem distorcer o texto, poderiam compartilhar?