Создать асимметричный фон

Question

Я хочу создать такой фон.И я должен признать, что у меня проблемы ... Не могу найти хороший способ сделать это.

Я пробовал, например, с transform : skewY(-6deg).Но -6deg вся моя страница.

Может ли кто-нибудь помочь мне найти хороший способ сделать это?

Спасибо за помощь!

Answer 1

Я считаю, что это хорошая отправная точка:

<div class="container">
  <div class="skewed">
    <div class="content">
      <p>Content of the skewed container</p>
    </div>
  </div>
</div>

и css:

body,
html {
  padding: 0;
  margin: 0;
}

.container {
  overflow: hidden;
}

.skewed {
  height: 400px;
  -webkit-transform: skewX(-6deg);
  -moz-transform: skewX(-6deg);
  -ms-transform: skewX(-6deg);
  -o-transform: skewX(-6deg);
  transform: skewX(-6deg);
  background-color: #2980b9;
}

.content {
  -webkit-transform: skewX(6deg);
  -moz-transform: skewX(6deg);
  -ms-transform: skewX(6deg);
  -o-transform: skewX(6deg);
  transform: skewX(6deg);
}

p {
  margin: 0;
  color: #ffffff;
}

Код

Answer 2

Вы можете использовать несколько фона и градиента:

.box {
  height:250px;
  padding:50px 0;
  background:
    linear-gradient(to bottom left,transparent 49%,#0060ff 50%)top/100% 50px,
    linear-gradient(#0060ff,#0060ff) center/100% calc(100% - 100px),
    linear-gradient(to top right,transparent 49%,#0060ff 50%)bottom/100% 50px,
    
    
    linear-gradient(to bottom right,transparent 49%,#00dbf8 50%)top/100% 50px;
  background-repeat:no-repeat;
}

<div class="box">
</div>

Вы можете сделать его более гибким с помощью переменной CSS, чтобы легко управлять перекосом:

.box {
  height:150px;
  padding:var(--p,50px) 0;
  background:
    linear-gradient(to bottom left,transparent 49%,#0060ff 50%)top/100% var(--p,50px),
    linear-gradient(#0060ff,#0060ff) center/100% calc(100% - 2*var(--p,50px)),
    linear-gradient(to top right,transparent 49%,#0060ff 50%)bottom/100% var(--p,50px),
    
    
    linear-gradient(to bottom right,transparent 49%,#00dbf8 50%)top/100% var(--p,50px);
  background-repeat:no-repeat;
}

<div class="box">
</div>
<hr>
<div class="box" style="--p:100px;">
</div>
<hr>
<div class="box" style="--p:40px;">
</div>