html - 如何使用 css 以下面提到的格式创建具有斜率效果的 4 div？

Question

我想使用 4 个 div 和 4 个带有坡度效果的图像使用 css 创建一个横幅结构。完全像上面提到的格式。请支持我。

Answer 1

这是您的代码结构。在全屏预览中正常工作。

.container{
  overflow:hidden;
  height:15rem;
  display:flex;
}

.box{
  height:20rem;
  flex:1
}

.box_1{
  background:red;
  transform:rotate(15deg) scale(1.5)
}

.box_2{
  background:black;
  flex:1.5;
}

.box_3{
  background:midnightblue;
  transform:rotate(-15deg) scale(1.5)
}

.box_4{
  background:green;
  transform:rotate(15deg) scale(1.5)
}

<div class="container">
  <div class="box box_1"></div>
  <div class="box box_2"></div>
  <div class="box box_3"></div>
  <div class="box box_4"></div>
</div>