Наклоните вершину div, используя css без перекоса текста

Я пытаюсь создать div, который наклонён только вверху и не искажает текст внутри него, используя CSS. Причина, по которой я хотел бы, чтобы это была только CSS, - это то, что она является отзывчивым дизайном и требует ответа на проценты, так как остальная часть этого div сгибается по мере изменения ширины устройства.

Фото того, что я пытаюсь выполнить, находится здесь:

То, что я получил до сих пор, это создать перекошенную div и поместить ее в другой div, а затем использовать отрицательный запас, чтобы потянуть его вверх. Есть две проблемы с этим, что я сделал это. Первая проблема заключается в том, что при минимальной усадке экрана (сделайте ширину вашего браузера очень маленькой) перекошенный div станет меньше, чем содержащий div, что делает его нечетным. Кроме того, этот div прикрывает любой текст, который я добавляю после него.

Разметка:

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

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

Я попытался использовать перекос на родителя в стороне, но это перекосит все дочерние элементы внутри него. Если бы это был фиксированный макет, я бы использовал абсолютное позиционирование, чтобы помочь мне, но поскольку он реагирует и сгибается, я не знаю, какой другой подход принять.

Я также хотел бы, чтобы это было в CSS, потому что у меня есть другие эффекты для добавления в div, такие как внешнее свечение с использованием box-shadow и фонового градиента.

Я также не могу изменить дизайн.

Любой ввод того, как это сделать, будет большим!

Ответ 1