Eu estou tentando criar um div que inclina apenas no topo e não inclina o texto dentro dele, usando CSS. A razão pela qual eu gostaria que fosse apenas CSS é porque é um design responsivo e precisa responder a porcentagens, já que o resto desta div flui à medida que a largura do dispositivo muda.

Uma foto do que estou tentando realizar está aqui:

O que eu tenho conseguido até agora é criar um div distorcido e posicioná-lo dentro do outro div, então use uma margem negativa para puxá-lo para cima. Há dois problemas com este modo que eu fiz isto. A primeira questão é que no menor encolhimento da tela (a largura do seu navegador é realmente pequena), a div distorcida se torna menor do que a div contendo, fazendo com que pareça estranho. Além disso, este div está cobrindo qualquer texto que eu estou adicionando depois dele.

A marcação:

<aside>
                <div id="skew"></div><!-- #skew -->
                <h3 id="refer">Refer Your Friends</h3>
</aside>

O CSS:

   #skew {
background:#00328b;
width:103%;
height:66px;
border-radius:8px;
margin-top:-47px;
margin-left:-1.2%;
  -webkit-transform: skewY(-5.5deg); 
 -moz-transform: skewY(-5.5deg); 
  -ms-transform: skewY(-5.5deg); 
   -o-transform: skewY(-5.5deg); 
      transform: skewY(-5.5deg); 
}

.main aside {
color: white;
padding: 20px 10px;
margin-top:120px;
border-radius:8px;
background: rgb(0,51,141); /* Old browsers */
}

Eu tentei usar o skew no pai de lado, mas isso inclina todos os elementos filho dentro dele. Se este fosse um layout fixo, eu usaria o posicionamento absoluto para me ajudar, mas como ele é responsivo e flexível, não sei qual outra abordagem a ser adotada.

Eu também gostaria que fosse em CSS porque eu tenho outros efeitos para adicionar ao div, como um brilho externo usando box-shadow e um gradiente de fundo.

Eu também não posso mudar o design.

Qualquer entrada sobre como conseguir isso seria ótimo!