Edit in JSFiddle

  .desk {
  width: 600px;
  height: 220px;
  position: absolute;
  left: 50%;
  bottom: 48px;
  margin-left: -300px;
  .bench,
  .leg {
    position: absolute;
  }
  .bench {
    top: 0;
    height: 18px;
    transform: scaleX(0);
  }
  .bench-1 {
    background-color: #e1f0f7;
    right: 50%;
    width: 245px;
    margin-right: 55px;
    transform-origin: right;
    z-index: 1;
  }
  .bench-2 {
    background-color: #d0e1e9;
    width: 360px;
    left: 50%;
    margin-left: -60px;
    transform-origin: left;
    z-index: 3;
  }
  .leg {
    width: 24px;
    top: 18px;
    height: 205px;
    transform-origin: top;
    transform: scaleY(0);
    &:before,
    &:after {
      content: '';
      width: 50%;
      height: 100%;
      position: absolute;
      top: 0;
    }
    &:before {
      left: 0;
    }
    &:after {
      right: 0;
    }
  }
  .leg-1 {
    left: 0;
  }
  .leg-2 {
    left: 228px;
  }
  .leg-3 {
    right: 245px;
  }
  .leg-4 {
    right: 0;
  }
  .leg-1,
  .leg-3 {
    z-index: 1;
  }
  .leg-2,
  .leg-4 {
    z-index: 3;
  }
  .leg-1:before {
    background-color: #e1f0f7;
  }
  .leg-1:after {
    background-color: #d0e1e9;
  }
  .leg-2:before {
    background-color: #e1f0f7;
  }
  .leg-2:after {
    background-color: #d0e1e9;
  }
  .leg-3:before {
    background-color: #b9d2d5;
  }
  .leg-3:after {
    background-color: #d0e1e9;
  }
  .leg-4:before {
    background-color: #b9d2d5;
  }
  .leg-4:after {
    background-color: #d0e1e9;
  }
}