Вы также должны быть осторожны с любой проблемой переполнения.

я есть некоторые проблемы, и я думаю, что эта проблема не будет решена. [Стиль и код снизу]

.box-blog {
  background: url(../img/image.png) center no-repeat;
  background-size: cver;
  width: 80%;
  display: block;
  margin: 0 auto;
  margin-top: 71px;
  height: 192px;
  border-radius: 0 40px;
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  background-color: #333;
  box-shadow: 15px 0 0 rgba(248,48,46,.3);
}`

Ответы на вопрос(1)

Решение Вопроса

Псевдо-элемент для фонового изображения и создать обратнуюскос в теме :

.box-blog {
  position: relative;
  width: 80%;
  display: block;
  margin: 0 auto;
  margin-top: 71px;
  height: 192px;
  border-radius: 0 40px;
  transform: skew(20deg);
  background-color: #333;
  box-shadow: 15px 0 0 rgba(248, 48, 46, .3);
  overflow: hidden;
}

.box-blog:before {
  content: " ";
  background: url(https://lorempixel.com/400/400/) center no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  right: -40px;
  bottom: 0;
  left: -40px;
  transform: skew(-20deg);
}
<div class="box-blog">

</div>

Это может быть универсальным решением для любого вида трансформации, и у вас есть две ситуации:

Преобразуйте элемент без преобразования фона: вы преобразуете элемент и создаете обратное преобразование для псевдоэлемента, как мы это делалиПреобразование фона без преобразования элемента: вы просто добавляете преобразование к псевдоэлементу.

Вы также должны быть осторожны с любой проблемой переполнения.

Ваш ответ на вопрос