如何仅向底角转换倾斜？

Question

我很困惑如何仅像下面这样改变一侧（顶部或底部）的角：

普通：

已转换：

有人可以帮我吗？在这里，顶角保持不变，而底角被变换。我该如何实现？

Answer 1

您可以使用perspective和transformY获得类似的输出，这是一个有效的代码段：

.scene {
  position: relative;
  left:100px;
  width: 200px;
  height: 200px;
  
  margin: 40px;
  /* perspective property */
  perspective: 400px;
}

.panel {
  width: 100%;
  height: 100%;
  background: blue;
  transform:  rotateX(-45deg);
}

<div class="scene">
  <div class="panel"></div>
</div>

Answer 2

您可以从这样的内容开始：

.container {
  overflow: hidden;
}

#childContainer {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
  height: 0;
  width: 100px;
}

<div class="container">
  <div id="childContainer">
  </div>
</div>