Origami UI

origami-ui.html

<div class="paper">
  <div class="paper-section">
    Hello !
  </div>
</div>

<div class="paper">
  <div class="paper-section">
    Hello !
  </div>
  <div class="paper-section">
    how
  </div>
  <div class="paper-section">
    are you ?
  </div>
</div>

<div class="paper">
  <div class="paper-section">
    Hello !
  </div>
</div>

<div class="paper">
  <div class="paper-section">
    Hello !
  </div>
</div>

<style>
  .paper {
  margin: 1em 0;
  position: relative;
  background-color: #fff;
  box-shadow: inset 0 0 0 .1em hsla(0,0%,0%,.05),
                inset 0 0 1em hsla(0,0%,0%,.025),
                0 .1em .25em hsla(0,0%,0%,.25);
}

.paper-section {
  position: relative;
  padding: 1em;
  background-image: -webkit-linear-gradient(hsla(0,0%,0%,.035), hsla(0,0%,100%,.07) 100%, hsla(0,0%,0%,.07) 100%);
}

.paper::after,
.paper:before {
    bottom: .1em;
    box-shadow: 0 0 .5em .5em hsla(0,0%,0%,.25);
    content: '';
    height: 0;
    position: absolute;
    width: 80%;
    z-index: -1;
}
.paper:after {
    right: 1em;
    -webkit-transform: rotate(3deg);
    -webkit-transform-origin: 100% 100%;
}
.paper:before {
    left: 1em;
    -webkit-transform: rotate(-3deg);
    -webkit-transform-origin: 0% 100%;
}
</style>