html - 如何使带有斜率的html div边缘？

Question

我当前的 HTML 和 CSS 是这样的:

我想把它变成这样:

我该怎么做？...

Answer 1

您可以使用rotate 和skew 变换来做到这一点。正 Angular 将导致旋转和倾斜的顺时针变换，因此在这种情况下您要使用负 Angular 。

.element {
  margin: 40px;
}
.element>div {
  height: 100px;
  width: 250px;
  transform: rotate(-10deg) skew(-10deg);
}

<div class="element">
  <div style="background: red"></div>
  <div style="background: blue"></div>
  <div style="background: green"></div>
</div>