*, :after, :before { box-sizing: border-box; } html, body { width: 100%; height: 100%; padding: 0; margin: 0; } .chat__body { font-family: sans; font-size: 26px; line-height: initial; color: initial; display: flex; width: 100%; height: 100%; //background-image: url("https://raw.githubusercontent.com/telegramdesktop/tdesktop/dev/Telegram/Resources/art/bg_initial.jpg"); //background-position-y: -54px; //background-attachment: fixed; } .sticker { width: 500px; position: relative; padding-left: 10px; } .chathead { position: absolute; bottom: 12px; width: 64px; height: 64px; //float: left; background-image: url("./photomair.jpg"); background-size: contain; clip-path: circle(50% at 50% 50%); } .messages { display: flex; flex-direction: column; flex-grow: 1; justify-content: flex-end; padding-left: 90px; padding-right: 10px; } .message { align-self: flex-start; display: flex; align-items: center; position: relative; min-height: 60px; max-width: 840px; background-color: #FFF; margin-bottom: 16px; border-radius: 12px; z-index: 2; box-shadow: 0 4px 0px 0 rgba(160,172,182,.5); } .message.droplet:before { position: absolute; content: ''; bottom: 0; left: -16px; width: 24px; height: 2px; background-color: inherit; z-index: 1; box-shadow: 0px 2px 2px 2px rgba(160,172,182,.5); } .message.droplet:after { position: absolute; content: ''; bottom: 0; left: -20px; width: 32px; height: 20px; //clip-path: url(#left-droplet); clip-path: polygon(62% 0, 100% 0, 100% 100%, 0 100%, 23% 85%, 40% 65%, 54% 33%); background-color: inherit; z-index: 1; box-shadow: 0 4px 2px 0 rgba(160,172,182,.5); } .message__text, .message__image__text .message__text__content { padding-top: 20px; padding-left: 20px; padding-right: 20px; z-index: 2; } .message__time { display: inline-block; float: right; padding-top: 8px; padding-bottom: 8px; padding-left: 28px; text-align: right; font-size: 24px; color: #a0acb6; }