CSS或Javascript纸张折叠效果

Question

我正在尝试复制创建和效果，如果用户点击div，它将打开＆＃34;打开＆＃34;就像一张正在展开的纸张。

我不知道从哪里开始或者甚至在谷歌上寻找什么，所以任何帮助或相关信息的链接都将非常有用。

这是我想要的图像（用于文本也用纸张展开）：

提前谢谢大家

Answer 1

HTML

<div class="parentDiv">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

CSS

div.parentDiv {
  width: 200px;
  height: 100px;
}

div.div1{
  width :100px;
  height: 100px;
  float:left;
  background-color: yellow;
  transform: skew(0deg,20deg);
}
div.div2{
  width :100px;
  height: 100px;
  float:left;
  background-color: yellow;
  transform: skew(0deg,-20deg);
}

您可以将文本“HELLO”放置在父div中，其位置为绝对位置且居中对齐。