<div class="outerbg">
<div class
  <div class="chatboxout">
    <div class="chatboxin">


      <div class="chat-container">
        <div class="chat-sender img"><img src="https://s24.postimg.org/7h2ei80qd/sahil_chat_avatar_08.png"></div>
        <div class="chat-sender msg"><strong>Ashley Maddison</strong>
          <div class="chatmsg">Reset my Windows Password</div>
        </div>
      </div>


      <div class="chat-container">
        <div class="chat-respond msg">
          <div class="flippd">
            <strong>Helpdesk Assistant</strong>
            <div class="chatmsg"> Hey Ashley! Done. Check your email for the password link and reset your password. Can I be of assistance to you for anything else?
            </div>
          </div>
        </div>
        <div class="chat-respond img"><img src="https://s24.postimg.org/j4ruz10hh/chat_avatar_09.png"></div>
      </div>


      <div class="chat-container">
        <div class="chat-sender img"><img src="https://s24.postimg.org/7h2ei80qd/sahil_chat_avatar_08.png"></div>
        <div class="chat-sender msg"><strong>Ashley Maddison</strong>
          <div class="chatmsg"> My iphone is not able to connect to the office VPN after the IOS upgrade.</div>
        </div>
      </div>


      <div class="chat-container">
        <div class="chat-respond msg">
          <div class="flippd">
            <strong>Helpdesk Assistant</strong>
            <div class="chatmsg"> HiOS no more supports PPTP VPN. Here’s a step by step guide to connect your iPhone to the office VPN
              <br> Connect iOS to the Office VPN iOS no more supports PPTP VPN. Use the following steps to connect to the office VPN:…
            </div>
          </div>
        </div>
        <div class="chat-respond img"><img src="https://s24.postimg.org/j4ruz10hh/chat_avatar_09.png"></div>
      </div>


    </div>
  </div>
</div>
.outerbg {
  width: 100%;
  max-width: 610px;
  margin: 20px;
  padding: 30px 0;
  margin: 0 auto;
  background: url('https://s24.postimg.org/63armx1h1/sahil_sahil_chatsbg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.chatboxout {
  font-family: open sans;
  font-size: 12px;
  line-height: 17px;
  box-sizing: border-box;
  max-width: 400px;
  margin: 0 auto;
  padding: 10px;
  background: #fff;
  border-radius: 5px;
  -webkit-box-shadow: 4px 4px 20px -1px rgba(59, 59, 59, 0.6);
  -moz-box-shadow: 4px 4px 20px -1px rgba(59, 59, 59, 0.6);
  box-shadow: 4px 4px 20px -1px rgba(59, 59, 59, 0.6);
}

.chatboxin {
  box-sizing: border-box;
  border: 1px solid rgba(208, 208, 208, 1);
  border-radius: 5px;
  padding: 5px 15px;
}

.chat-sender.msg {
  -webkit-clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 12px 70%);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 12px 70%);
  padding: 9px 9px;
  padding-left: 21px;
  background-color: #5D5D5D;
  color: #fff;
  box-sizing: border-box;
  width: calc(100% - 53px);
  margin-left: -9px;
}

.chatmsg {
  margin-top: 5px;
}

.chat-sender {
  display: inline-block;
  vertical-align: top;
}

.chat-container {
  margin-top: 15px;
  margin-bottom: 15px;
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}

.chat-respond.msg {
  -webkit-clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 12px 70%);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 12px 70%);
  padding: 9px 9px;
  padding-left: 21px;
  background-color: #E6E6E6;
  color: #333;
  box-sizing: border-box;
  width: calc(100% - 53px);
  margin-right: -9px;
  transform: scale(-1, 1);
  -moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
}

.chat-respond.msg strong {
  color: #F48806;
}

.chat-respond {
  display: inline-block;
  vertical-align: top;
}

.flippd {
  width: 100%;
  transform: scale(-1, 1);
  -moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
}


@keyframes fadein {
    from {
        opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    }
    to {
       opacity: 1;
    -webkit-transform: none;
    transform: none;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
       opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    }
    to {
         opacity: 1;
    -webkit-transform: none;
    transform: none;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
       opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    }
    to {
       opacity: 1;
    -webkit-transform: none;
    transform: none;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
       opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    }
    to {
         opacity: 1;
    -webkit-transform: none;
    transform: none;
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.