Секция под углом

Question

Как сделать секцию под углом? Вот так:

У меня сейчас так:

body {
  margin: 0;
  background: #222;
  color: #222;
}

.title {
  background: goldenrod;
  margin-top: -200px;
  padding: 100px 0;
}

.title .content {
  text-align: center;
}

h1 {
  padding-top: 150px;
}

.footer {
  padding-top: 300px;
}

<div class="title">
  <div class="content">
    <h1>Заголовок</h1>
    <p>Текст текст текст текст текст текст</p>
  </div>
</div>
<div class="footer"></div>

Answer 1

3) вариант из комментария @OPTIMUS PRIME

.item {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: lightblue;
  color: #fff;
}

.item h1 {
  margin: 0;
}

<div class="item">
  <h1>lorem ipsum</h1>
  <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam molestiae in <br>inventore eos accusamus excepturi eligendi ea recusandae similique saepe.</p>
</div>
<svg viewBox="0 0 10 1" preserveAspectRatio="none">
  <path d="M0,0 10,0 0,1" fill="lightblue"/>
</svg>

css border

.item{
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: lightblue;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.item:after{
  content: "";
  display: block;
  width: 100vw;
  position: absolute;
  left: 0;
  bottom: 0;
  border-top:0px solid green;
  border-bottom:60px solid #fff;
  border-left:100vw solid lightblue;
  border-right:0px solid yellow;
}

.item h1{
  margin: 0;
}

<div class="item">
  <h1>lorem ipsum</h1>
  <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam molestiae in <br>inventore eos accusamus excepturi eligendi ea recusandae similique saepe.</p>
</div>

Answer 2

Предлагаю вариант с использованием CSS3-трансформации transform: skew

Ещё больше вариантов как сверстать фон, нарезанный по диагонали, можно посмотреть здесь

body {
  margin: 0;
  background: #222;
  color: #222;
}

.title {
  background: goldenrod;
  margin-top: -200px;
  padding: 100px 0;
  transform: skew(0deg, -10deg);
}

.title .content {
  transform: skew(0deg, 10deg);
  text-align: center;
}

h1 {
  padding-top: 150px;
}

.footer {
  padding-top: 300px;
}

<div class="title">
  <div class="content">
    <h1>Заголовок</h1>
    <p>Текст текст текст текст текст текст</p>
  </div>
</div>
<div class="footer"></div>

Answer 3

html, body {
  height: 100%;
  margin: 0;
  background: linear-gradient(-20deg, red 50%, blue calc(50% + 1px));
}

БЛОГ НА HUSL

Секция под углом

Ответы (3 шт):