cssで背景を斜め＆台形にしたい

やりたい事

①のような平行四辺形にはできるのですが
②のような台形にする事ができなくて質問に参りました。

②が今回チャレンジしてる形です

試した事

「afterにtransformを使用して新な斜めを作る」
top02の背景画像(棒人間)が斜めにではなく真っ直ぐ切れてしまいます。
top02の背景画像(棒人間)も斜めに切る事はできますでしょうか？

知りたいこと

・②のような台形にする場合、cssで指定できるのか
・top02の背景画像(棒人間)が斜めに切れない理由＆斜めに切る事ができるのか

宜しくお願い致します。

HTML
1<div id="top01">
2  <div id="top02">
3    <div id="top03">
4    　　<p>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。</p>
5    </div>
6  </div>
7</div>

css
1#top01{
2    transform: skew(0deg,-5deg);
3    width: 100%;
4    background-image:url(http://lorempixel.com/400/200/sports);
5    background-size: cover;
6    overflow: hidden;
7}
8#top01:after{
9    content: '';
10    position: absolute;
11    top: 0;
12    left: 0;
13    width: 120%;
14    height: 120%;
15    margin: 3% -10% 0;
16    background: #ccc;
17    -webkit-transform-origin: right center;
18    -ms-transform-origin: right center;
19    transform-origin: right center;
20    -webkit-transform: rotate(10deg);
21    -ms-transform: rotate(10deg);
22    transform: rotate(10deg);
23    z-index: -2;
24}
25#top02{
26    background-image:url(https://1.bp.blogspot.com/-HdrrDLMxxGs/Ws2uzOpk8yI/AAAAAAABLRY/9Td_5zg6Nf4eOkMiTbVdJ8qwuAfHfCltwCLcBGAs/s800/figure_dance.png);
27    min-height: 100vh;
28    background-attachment: fixed;
29    background-size: cover;
30    background-position: left top;
31    transform: skew(0deg,5deg);
32    padding-top:150px;
33}