创建倾斜的div并水平和垂直对齐它们

Question

我正在尝试在HTML中实现以下设计。到目前为止，我添加了倾斜边缘的div。

但是，我必须根据网页中同类的其他div进行div对齐。现在，我试图以这样一种方式定位div，使得顶部和底部的倾斜看起来就像是并排的div。我需要知道如何定位这些div以实现模型UI。任何建议或帮助都是最受欢迎的。

尝试代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.dataWrapper {
  margin: 5% 0;
  padding: 100px;
  background: grey;
  position: relative;
  width: 50%;
}

.dataWrapper:before,
.dataWrapper:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  background: grey;
  z-index: -1;
}

.dataWrapper:before {
  top: -40px;
  transform: skew(0, -3deg);
}

.dataWrapper:after {
  bottom: -40px;
  transform: skew(0, -3deg);
}

.leftDiv {
  width: 49.5%;
  min-height: 400px;
  background: grey;
  float: left;
  top: 2%;
}

.rightDiv {
  width: 49.5%;
  background: grey;
  min-height: 400px;
  float: left;
  left: 1%;
}

.clear:after {
  clear: both;
  display: table;
  content: "";
}

<div class="dataWrapper leftDiv">test div</div>
<div class="dataWrapper rightDiv"> test</div>
<div class="dataWrapper leftDiv">test div</div>
<div class="dataWrapper rightDiv"> test</div>

Answer 1

尝试以下方法。 dataWrapper :: before有一个padding-top属性。 100％填充顶部将使父母加强到正方形。如果你希望div的宽度是它的一半，那么选择＆＃34; padding-top：50％＆＃34;。

如果您需要dataWrapper中的内容，则可以添加另一个绝对位置的div。

希望这会有所帮助。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.dataWrapper {
  background: grey;
  position: relative;
  width: 50%;
  float: left;
  outline: 1px solid #ffffff;
}

.dataWrapper::before {
  content: '';
  display: block;
  padding-top: 100%;
}

#main {
  margin: auto;
  width: 400px;
  transform: skew(0, -3deg);
}

<div id="main">
  <div class="dataWrapper"></div>
  <div class="dataWrapper"></div>
  <div class="dataWrapper"></div>
  <div class="dataWrapper"></div>
</div>