Как сделать HTML край Div с уклоном?

Question

мои текущие HTML и CSS похожи на:

Я хочу сделать это так:

Как можноЯ делаю это? ...

Answer 1

Более простое решение без использования преобразования - полагаться на градиент:

.box {
  height:300px;
  width:200px;
  background:linear-gradient(160deg, transparent 0, transparent 20%,
                                    red 20%,red 40%,
                                    green 40%,green 60%,
                                    blue 60%,blue 80%,
                                    transparent 0);
  background-color:grey;
}

<div class="box">

</div>

Answer 2

.container {
  margin: 40px;
  background-color: grey;
  height: 380px;
  width: 250px;
  position: absolute;
}
.box {
  height: 100px;
  width: 250px;
  transform: skewY(-10deg);
}

#red{
  margin-top: 20px;
}

<div class="container">
  <div style="background: red" id="red" class="box"></div>
  <div style="background: green" class="box"></div>
  <div style="background: blue" class="box"></div>
</div>

Answer 3

transform: skewY(); твой друг.Попробуйте этот код.

<div id="red">
  <div class="inner">
    red
  </div>
</div>
<div id="green">
  <div class="inner">
    green
  </div>
</div>
<div id="blue">
  <div class="inner">
    blue
  </div>
</div>

#red {
  min-height: 300px;
  width: 100%;
  background-color: red;
  transform: skewY(-5deg);
  padding: 50px 0;
}

#green {
  min-height: 300px;
  width: 100%;
  background-color: green;
  transform: skewY(-5deg);
  padding: 80px 0;
}

#blue {
  min-height: 300px;
  width: 100%;
  background-color: blue;
  transform: skewY(-5deg);
  padding: 50px 0;
}

.inner {
  transform: skewY(5deg);
}

Answer 4

Вы можете сделать это с помощью преобразований 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>

Answer 5

Вы можете попробовать что-то вроде этого:

<div style="background: red; width: 200px; height: 200px; transform: rotate(-4deg);"></div>

Если вы хотите вращаться по часовой стрелке, передайте значение угла в положительное значение.Если вы хотите, чтобы он вращался против часовой стрелки, передайте значения в минус.

Answer 6

Этого можно добиться, используя CSS для 2D-преобразования: https://www.w3schools.com/css/css3_2dtransforms.asp

Чтобы повернуть div s, все, что вам нужно сделать, это добавить transform: rotate(30deg); к их стилям.