Question

我目前的HTML＆amp; CSS就像：

我想这样做：

我该怎么做？...

Answer 1

您可以使用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 2

不使用变换的更简单的解决方案是依靠渐变：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

您可以尝试这样的事情：

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

如果要以顺时针方向旋转，请将角度值传递给正值。如果你想让它以逆时针方向旋转，则将值传递给负值。

Answer 4

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 5

＆＃13;

<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>

＆＃13;

let reachability = Reachability()!

NotificationCenter.default.addObserver(self, selector: #selector(reachabilityChanged(note:)), name: .reachabilityChanged, object: reachability)
do{
  try reachability.startNotifier()
}catch{
  print("could not start reachability notifier")
}

＆＃13;

Answer 6

您应该能够使用2D变换CSS实现此目的：https://www.w3schools.com/css/css3_2dtransforms.asp

要旋转div，您需要做的只是将transform: rotate(30deg);添加到其样式中。

如何用斜率制作html div边缘？

6 个答案: