<div class="background">
  <ol></ol>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>

  <div class="merryXmas">Merry Christmas</div>
</div>

<a class="author" href="https://itsmenatalie.com" target="_blank">Created by ItsMeNatalie</a>
body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  overflow: hidden;

  .background {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 500px;
    background-color: white;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .5);
    overflow: hidden;
    font-family: "Great Vibes", cursive;

    .merryXmas {
      position: absolute;
      bottom: 10px;
      font-size: 36px;
    }

    ol {
      position: relative;
      list-style-type: none;
      margin: 0;
      padding: 0;
      border-right: 50px solid transparent;
      border-bottom: 35px solid #ffb677;
      border-left: 50px solid transparent;
      box-shadow: 0 3px 3px -3px #222;
      transform: rotate(180deg);
      z-index: 5;

      &:before {
        content: "";
        position: absolute;
        top: -22px;
        left: -30px;
        border-bottom: 40px solid #ff8364;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        box-shadow: 0 3px 3px -3px #222;
        transform: rotate(-35deg);
      }

      &:after {
        position: absolute;
        top: 1.5px;
        left: -52.5px;
        border-right: 50px solid transparent;
        border-bottom: 35px solid #ffd98e;
        border-left: 50px solid transparent;
        box-shadow: 0 3px 3px -3px #222;
        transform: rotate(-70deg);
        content: "";
      }
    }
    
    ul {
      position: relative;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
      &:before {
        content: '';
        position: absolute;
        bottom: -20px;
        height: 20px;
        width: 30px;
        background-color: #a34a28;
        box-shadow: 0 2px 2px -2px #222;
      }
      
      &:after {
        content: '';
        position: absolute;
        bottom: -20px;
        left: 65px;
        width: 0;
      height: 0;
      border-top: 20px solid rgba(#211717, .5);
      border-right: 30px solid transparent;
      }

      li {
        position: relative;
        list-style-type: none;
        width: 0;
        height: 0;

        &:nth-child(1) {
          margin-top: -10px;
          border-left: 50px solid transparent;
          border-right: 50px solid transparent;
          border-bottom: 70px solid #edf0c7;
          box-shadow: 0 5px 5px -5px #222;
          z-index: 3;
        }

        &:nth-child(2) {
          margin-top: -30px;
          border-left: 60px solid transparent;
          border-right: 60px solid transparent;
          border-bottom: 80px solid #4e9525;
          box-shadow: 0 4px 4px -4px #222;
          width: 10px;
          z-index: 2;
        }

        &:nth-child(3) {
          margin-top: -30px;
          border-left: 70px solid transparent;
          border-right: 70px solid transparent;
          border-bottom: 90px solid #2e5a1c;
          box-shadow: 0 3px 3px -3px #222;
          width: 20px;
          z-index: 1;
        }
      }
    }
  }

  a {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    position: absolute;
    left: calc(50% - 96px);
    bottom: 0;
    font-style: italic;
    font-size: 12px;
    color: #212121;
    background-color: white;
    padding: 10px 20px;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.