Estoy intentando crear un div que se inclina solo en la parte superior y no inclina el texto dentro de él, usando CSS. La razón por la que me gustaría que sea solo para CSS es porque es un diseño sensible y necesita responder a porcentajes, ya que el resto de esta división se flexiona a medida que cambia el ancho del dispositivo.

Una foto de lo que estoy tratando de lograr está aquí:

Lo que he conseguido hasta ahora es crear un div sesgado y posicionarlo dentro del otro div, luego usar un margen negativo para tirar hacia arriba. Hay dos problemas con esta manera que he hecho esto. El primer problema es que en la contracción de pantalla más pequeña (hacer que el ancho de su navegador sea realmente pequeño), el div sesgado se vuelve más pequeño que el div que contiene, lo que lo hace parecer extraño. Además, esta división está cubriendo cualquier texto que esté agregando después.

El marcado:

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

El 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 */
}

He intentado usar el sesgo sobre el padre aparte, pero esto sesga todos los elementos secundarios dentro de él. Si se tratara de un diseño fijo, usaría el posicionamiento absoluto para ayudarme, pero como es sensible y flexible, no sé qué otro enfoque tomar.

También me gustaría que esté en CSS porque tengo otros efectos para agregar a la división, como un brillo externo con la sombra de la caja y un degradado de fondo.

Tampoco puedo cambiar el diseño.

Cualquier aportación sobre cómo lograr esto sería genial!