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

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

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

Разметка:

                
                Refer Your Friends

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, и градиент фона.

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

Любое мнение о том, как этого добиться, было бы здорово!