<div class='wrapper'>
  <div class='notification light'>
    <div class='icon'></div>
    <div class='message'>
      <b>New message xxxxxxxx xxxxxxx xxx</b>
      <span>Hey! How are you?</span>
    </div>
  </div>
  <div class='notification dark'>
    <div class='icon'></div>
    <div class='message'>
      <b>New message</b>
      <span>Hey! How are you?</span>
    </div>
  </div>
  <div class='notification dark'>
    <div class='icon'></div>
    <div class='message'>
      <b>New message</b>
      <span>Hey! How are you?</span>
    </div>
  </div>
  <div class='notification dark'>
    <div class='icon'></div>
    <div class='message'>
      <b>警告</b>
      <span>使用者名稱錯誤!</span>
    </div>
  </div>
  <div class='notification dark'>
    <div class='icon'></div>
    <div class='message'>
      <b>New message</b>
      <span>Hey! How are you?</span>
    </div>
  </div>
</div>

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background: -webkit-linear-gradient(#584771, #9f798e);
}
.wrapper {
  width: 500px;
  margin: auto auto;
}




.notification {
  position: relative;
  height: 55px;
  width: 100%;
  margin: 20px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 0px 0px 100px 0px;
}
.notification:after {
  position: absolute;
  content: "";
  height: 30px;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  display: block;
  top: 0;
  left: 0;
  border-radius: 0 0 50px 0;
  z-index: 11;
}
.light {
  background: rgba(42,152,162, 0.2);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), inset 0 0px 10px rgba(255, 255, 255, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
.dark {
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), inset 0 0px 10px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
.notification .icon {
  display: inline-block;
  width: 65px;
  vertical-align: middle;
  height: 55px;
  background: rgba(0, 0, 0, 0.1);
  margin: 0;
  padding: 0;
  border-radius: 30px 0 30% 0;
  box-shadow: 1px 0 1px rgba(255, 255, 255, 0.1);
  border-right: 5px solid rgba(42, 152, 162, 0.8);
}

.message {
  vertical-align: middle;
  font-family: Arial;
  display: inline-block;
  width: auto;
  position: relative;
  z-index: 8;
  font-size: 12px;
  margin-left: 10px;
  opacity: 0.8;
}
.message b {
  font-size: 14px;
  font-weight: 600;
  display: block;
}
.light .message {
  color: #111;
  text-shadow: -1px -1px 0px rgba(42, 152, 162, 0.2);
}
.dark .message {
  color: #00eeff;
  text-shadow: -1px -1px 0px rgba(42,152,162, 0.8);
}