如何在一个角度下并排获得 3 div

Question

我有这样的想法来对齐 3 div：
红色是 div1，黄色是 div2，绿色是 div3。它们并排，但它们处于一个角度下。我该如何做到这一点？通过 CSS?

Answer 1

您可以使用transform: rotate()

.parent {
  display: flex;
  overflow: hidden;
  width: 400px;
  height: 200px;
  border: 2px solid black;
}
.box {
  height: 100%;
  transform: skew(15deg);
}
.box:nth-child(1) {
  background: #F40C42;
  margin-left: -30px;
  flex: 0 0 150px;
}
.box:nth-child(2) {
  background: #DBF408;
  flex: 0 0 170px;
  border-left: 2px solid black;
  border-right: 2px solid black;
}
.box:nth-child(3) {
  background: #58F40B;
  flex: 0 0 150px;
}

<div class="parent">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

如何在一个角度下并排获得 3 div

How to get 3 div's side by side under an angle

html

css

css-float