Fond incliné avec des composants angulaires

Question

Je suis confronté à un petit problème de conception avec les ajustements CSS. J'ai incliné les arrière-plans de toutes les sections et les éléments mais près du pied de page, je veux joindre l'article et le pied de page il ne s'ajuste pas selon le design. Quelqu'un peut-il aider à résoudre le problème. Voici mon lien plunker.

<https://plnkr.co/edit/iCgonAiCoBUfSaAF851P?p=preview> 

Answer 1

changement CSS comme

suivante

section { 
background: #191919; 
    color: white; 
} 
section, article { 
    transform: skew(0deg, -10deg); 
    padding: 20px; 
} 
section>div, article >div{ 
    transform: skew(0deg, 10deg); 
} 
article { 
    background: white; 
    color: black; 
} 

Plunker Link

Answer 2

Comme suggéré dans les commentaires, ajouter de la couleur de fond à votre corps et ajouter une marge supérieure au pied de page, et utilisez le CSS suivant:

body, html { 
    height: 100%; 
    margin: 0; 
    background:#191919; 
} 
.hero-image { 
    background-color: #6c7cd0; 
    padding: 200px 0; 
    transform: skew(0deg, -10deg); 
    margin-top: -150px 
} 
.hero-text { 
    transform: skew(0deg, 10deg); 
    text-align: center; 
} 

.wrapper { 
    transform: skew(0deg, -10deg); 
    background: #191919; 
    color: white; 
} 
section, article { 
    transform: skew(0deg, 10deg); 
    padding: 20px; 
} 
.wrapper::after{ 
    transform: skew(0deg, -10deg); 
} 

div > h1 { 
    margin-top: 50px; 
} 
footer { 
    text-align: center; 
    background: #6c7cd0; 
    color: white; 
    margin-top:50px; 
    padding: 20px; 
} 

Note: Votre mise en page a besoin d'un travail considérable dans les plus grands des fenêtres spécifiques au problème de l'obliquité.

Espérons que cela aide.