console
<html>
<body>
<div class="im">
<div class="chat-box">
<div class="chat me">你好呀！</div>
<div class="chat you">你好！好久不见！</div>
<div class="chat me">你好呀！</div>
<div class="chat you">你好！好久不见！</div>
<div class="chat me">你好呀！</div>
<div class="chat you">你好！好久不见！</div>
<div class="chat me">你好呀！</div>
<div class="chat you">你好！好久不见！</div>
<div class="chat me">你好呀！</div>
<div class="chat you">你好！好久不见！</div>
<div class="chat me">你好呀！</div>
<div class="chat you">你好！好久不见！</div>
<div class="chat me">你好呀！</div>
<div class="chat you">你好！好久不见！</div>
<div class="chat me">你好呀！</div>
<div class="chat you">你好！好久不见！</div>
<div class="chat me">你好呀！</div>
<div class="chat you">你好！好久不见！</div>
<div class="chat me">你好呀！</div>
<div class="chat you">你好！好久不见！</div>
<div class="chat me">你好呀！</div>
<div class="chat you">你好！好久不见！</div>
<div class="chat me">你好呀！</div>
<div class="chat you">你好！好久不见！</div>
<div class="chat me">你好呀！</div>
<div class="chat you">你好！好久不见！</div>
<div class="chat me">你好呀！</div>
<div class="chat you">你好！好久不见！</div>
<div class="chat me">你好呀！</div>
<div class="chat you">你好！好久不见！</div>
<div class="chat me">你好呀！</div>
<div class="chat you">你好！好久不见！</div>
</div>
<div class="chat-bar">
<textarea class="chat-input"></textarea>
<button value="发送" class="chat-submit">
发送
</button>
</div>
</div>
</body>
</html>
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
}
.im {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
background-size: 100% 100%;
}
.chat-box {
flex: auto;
overflow-y: scroll;
padding: 1em;
}
.chat {
margin-top: 1em;
margin-bottom: 1em;
background-color: azure;
padding: 0.8em;
border-radius: 1em;
max-width: 80%;
width: max-content;
position: relative;
color: black;
border: 0.1px solid rgba(0, 0, 0, 0.5);
}
.chat::after {
content: " ";
position: absolute;
border: solid transparent;
border-top-width: 0.4em;
border-bottom-width: 0.2em;
border-right: azure solid 0.4em;
border-left: 0px;
bottom: 0.8em;
left: calc(-0.4em + 1px);
filter: drop-shadow(-1px 0 0 rgba(0,0,0,0.5));
}
.chat.me {
margin-left: auto;
margin-right: 0;
background-color: whitesmoke;
color: black;
}
.chat.me::after {
border-left: whitesmoke solid 0.4em;
border-right: 0px;
left: unset;
right: calc(-0.4em + 1px);
filter: drop-shadow(1px 0 0 rgba(0,0,0,0.5));
}
.chat-bar {
background: whitesmoke;
padding: 5px;
display: flex;
border-top: 0.3px solid rgb(192,192,192);
align-content: flex-end;
}
.chat-bar * {
line-height: 1.2em;
height: 1.2em;
font-size: 1rem;
box-sizing: content-box;
padding: 5px 8px;
border-width: 1px;
}
.chat-bar button {
border-radius: 3px;
color: white;
background: darkcyan;
overflow: hidden;
position: relative;
}
.chat-bar button::after{
content: " ";
position: absolute;
pointer-events: none;
top: 0; left: 0; width: 100%; height: 100%;
transition: background 0.1s;
}
.chat-bar button:not(:disabled):hover::after {
background: rgba(255, 255, 255, 0.5);
}
.chat-bar button:not(:disabled):active::after {
background: rgba(0, 0, 0, 0.5);
}
.chat-bar button:disabled {
border-radius: 3px;
color: white;
background: grey;
}
.chat-bar textarea{
border-color: grey;
margin-right: 5px;
resize: none;
flex: auto;
max-height: 5em;
min-height: 1.2em;
}