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

Question

我当前的 HTML 和 CSS 如下：

我想让这个像：

我怎样才能做到这一点？...

标签： htmlcss

Answer 1

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

.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>