Question

如何创建图像中显示的两个div，一个div应该是粉红色，另一个是蓝色。我想创建相同的形状，就像在这个例子中但使用两个div

Answer 1

使用css transform skew属性，您可以倾斜正确的容器并将其移动到左侧。请注意，通过将溢出隐藏属性应用于父容器

，策略性地隐藏了倾斜容器的右端

下面的代码段

＆＃13;

#container {
  width: 700px;
  height: 200px;
  white-space: nowrap;
  overflow: hidden;
}

#left {
  position: relative;
  width: 70%;
  height: 100%;
  display: inline-block;
  background-color: #ED145B;
}

#right {
  position: relative;
  width: 20%;
  height: 100%;
  display: inline-block;
  background-color: #212635;
}

#right {
  transform: skew(-30deg, 0deg);
  -moz-transform: skew(-30deg, 0deg);
  -webkit-transform: skew(-30deg, 0deg);
  -o-transform: skew(-30deg, 0deg);
  -ms-transform: skew(-30deg, 0deg);
  right: 10%;
  width: 500px;
}

＆＃13;

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

＆＃13;

Answer 2

.skew {
  width: 10px;
  height: 100px;
  background: black;
  -webkit-transform: skew(0deg); /* Chrome, Opera */
      -ms-transform: skew(0deg); /* IE */
          transform: skew(0deg); /* Padrão */
}

.positive {
  -webkit-transform: skew(10deg); /* Chrome, Opera */
      -ms-transform: skew(10deg); /* IE */
          transform: skew(10deg); /* Padrão */
}

.negative {
  -webkit-transform: skew(-10deg); /* Chrome, Opera */
      -ms-transform: skew(-10deg); /* IE */
          transform: skew(-10deg); /* Padrão */
  }

<span>0 DEG</span>
<div class="skew"></div>

<span>10 DEG</span>
<div class="skew positive"></div>

<span>-10 DEG</span>
<div class="skew negative"></div>

我该如何制作不规则形状的div

2 个答案: