resize button css

ABCD

by Yugank_Singh

HTML

<link rel="stylesheet" href="/css/chatbox.css">
<div class="chatbox-flipped glass-morphed-bg triangle">
  <div class="triangle"></div>
	<div class="chatbox">
		<div class="chats-container">
			<p class='received'>
				hey bob
			</p>
			<p class='received'>
				hey bob
			</p>
			<p class='sent'>
				Hey there A-Hole
			</p>
			<p class='received'>
				You haven't changed much since junior high
			</p>
			<p class='received'>
				hey bob
			</p>
			<p class='sent'>
				Hey there A-Hole
			</p>
			<p class='received'>
				You haven't changed much since junior high
			</p>
			<p class='sent'>
				Hey there A-Hole
			</p>
			<p class='received'>
				You haven't changed much since junior high
			</p>
			<p class='sent'>
				Hey there A-Hole
			</p>
			<p class='received'>
				You haven't changed much since junior high
			</p>
			<p class='sent'>
				Hey there A-Hole
			</p>
			<p class='received'>
				You haven't changed much since junior high
			</p>
			<p class='received'>
				hey bob
			</p>
			<p class='sent'>
				Hey there A-Hole
			</p>
			<p class='received'>
				You haven't changed much since junior high
			</p>
		</div>
		<div class="message-form-container">
			<form action="" class="message-form">
				<input type="text" name="message" class="message-input" placeholder="Enter Message">
				<button>Send</button>
			</form>
	
		</div>
	</div>
</div>

CSS

/* SCSS Code at the last */

.chatbox-flipped {
  overflow: hidden;
  resize: both;
  transform: rotate(180deg);
  width: 30%;
  min-width: 300px;
  min-height: 250px;
  height: 400px;
  max-width: 98vw;
  max-height: 98vh;
  position: fixed;
  bottom: 0;
  right: 0; }
  .chatbox-flipped .triangle {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    -webkit-transform: rotate(45deg);
    background: white; }

.chatbox {
  transform: rotate(180deg);
  color: white;
  --padding-bottom: 10px;
  border: 2px rgba(255, 255, 255, 0.25) solid;
  width: 100%;
  height: 100%;
  border-bottom: 0;
  padding: 20px;
  padding-right: 3px;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  right: 0; }
  .chatbox .message-form-container {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    display: grid;
    grid-column: 5,2; }
  .chatbox .chats-container {
    box-sizing: border-box;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll; }
    .chatbox .chats-container .sent {
      text-align: right; }
    .chatbox .chats-container .received {
      text-align: left; }
    .chatbox .chats-container p:nth-child(1) {
      margin-top: 0; }

.glass-morphed-bg {
  background: rgba(33, 121, 98, 0.85);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18); }