非矩形布局

Question

我想像这样创建HTML布局 Pixbuf property

我尝试使用一些css代码使元素非矩形，但到目前为止没有运气:)。

我看到这篇文章： https://dribbble.com/shots/2136656-Minions-Promo/attachments/393961 但在那里找不到答案：）

任何人都知道如何构建这个东西？

由于

Answer 1

您可以使用:pseudo元素添加背景并使用skew属性

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.red {
  padding: 15px;
  position: relative;
  color: white;
  margin-bottom: 50px;
}
.red:after {
  content: '';
  position: absolute;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  background: tomato;
  z-index: -1;
  transform: skew(0deg, 2deg);
}
.blue {
  position: relative;
  padding: 15px;
}
.blue:after {
  content: '';
  position: absolute;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  background: cornflowerblue;
  z-index: -1;
  transform: skew(0deg, -2deg);
}

＆＃13;

<div class="red">
  <h1>Sed augue ipsum egestas</h1>
  <p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Vivamus aliquet elit ac nisl. Donec id justo. Praesent turpis.</p>

  <p>Integer tincidunt. Fusce convallis metus id felis luctus adipiscing. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum volutpat pretium libero.</p>

  <p>Pellentesque posuere. Nam pretium turpis et arcu. Etiam imperdiet imperdiet orci. Quisque id mi.</p>
</div>


<div class="blue">
  <h1>Sed augue ipsum egestas</h1>
  <p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Vivamus aliquet elit ac nisl. Donec id justo. Praesent turpis.</p>

  <p>Integer tincidunt. Fusce convallis metus id felis luctus adipiscing. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum volutpat pretium libero.</p>

  <p>Pellentesque posuere. Nam pretium turpis et arcu. Etiam imperdiet imperdiet orci. Quisque id mi.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.yellow {
  margin: 80px 0;
  padding: 15px;
  background: yellow;
  position: relative;
}
.yellow:before,
.yellow:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  background: yellow;
  z-index: -1;
}
.yellow:before {
  top: -40px;
  transform: skew(0, 3deg);
}
.yellow:after {
  bottom: -40px;
  transform: skew(0, -3deg);
}

＆＃13;

<div class="yellow">Fusce fermentum odio nec arcu. Nullam accumsan lorem in dui. Nullam accumsan lorem in dui. Cras varius. Morbi mollis tellus ac sapien. Cras dapibus. Fusce pharetra convallis urna. Fusce a quam. Maecenas ullamcorper, dui et placerat feugiat, eros pede
  varius nisi, condimentum viverra felis nunc et lorem. Phasellus consectetuer vestibulum elit. Aliquam lobortis. Cras ultricies mi eu turpis hendrerit fringilla.</div>

＆＃13;

＆＃13;

＆＃13;