добавить наложение на картинку

Question

Я хотел бы преобразовать div, чтобы применить его перед панелью.

position: absolute;
font-size: 28px;
top: 203px;
left: 149px;
width: 661px;
height: 384px;
-webkit-transform: skewY(4.1deg) rotate(1deg);
background-color: red;

но в правом нижнем углу div не заполняет до фона.

Что такое свойство css для правильной установки?

Answer 1

Этот код исправляет нижний правый угол и учитывает другие ответы:

.background {
  position: relative;
  width: 960px;
  height: 720px;
  background-image: url('http://www.radiomelodie.com/actus/actu-08062017id7801.jpg');
}

.overlay {
  position: absolute;
  font-size: 28px;
  top: 200px;
  left: 149px;
  width: 665px;
  height: 395px;
  -webkit-transform: skewY(3deg) skewX(1deg) rotate(0.9deg);
  background: linear-gradient(359.2deg, transparent 6%, red 6%)
}

<div class="background">
  <div class="overlay"></div>
</div>

Answer 2

Вы можете добавить skewX к вашему css. Я попробовал это и почти заполнил форму:

    position: absolute;
    font-size: 28px;
    top: 203px;
    left: 149px;
    width: 641px;
    height: 354px;
    -webkit-transform: skewY(4.1deg) rotate(1deg) skewX(2deg);
    background-color: red;