超大只番薯

三角形

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #main {
      width: 0;
      height: 0;
      border: 30px solid;
      border-color: transparent transparent red transparent;
    }
  </style>
</head>
<body>
<div id="main"></div>
</body>
</html>

垂直居中一个浮动元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>垂直居中一个浮动元素</title>
  <style>
    .outer {
      position: relative;
      height: 200px;
    }

    .float {
      float: left;
      height: 100px;
      line-height: 100px;
      top: 50%;
      margin-top:-50px;
      position: absolute;
    }
  </style>
</head>
<body>
<div class="outer">
  <div class="float">垂直居中一个浮动元素</div>
</div>
</body>
</html>

聊天框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #container {
      position: relative;
      width: 40vw;
      height: 93vh;
      border: 1px solid #ccc;
      overflow: auto;
    }

    .container {
      display: flex;
      align-items: center;
      margin-top: 10px;
    }

    .left {
      width: 0;
      height: 0;
      border: 8px solid;
      border-color: transparent #5cb85c transparent transparent;
    }

    .right {
      width: 0;
      height: 0;
      border: 8px solid;
      border-color: transparent transparent transparent #5cb85c;
    }

    .left-box {
      align-self: flex-start;
    }

    /*靠右对齐*/
    .right-box {
      flex-direction: row-reverse;
    }

    .main {
      background-color: #5cb85c;
      border-radius: 5px 5px;
      font-size: 18px;
      padding: 5px;
      display: flex;
      align-items: center;

    }

    img {
      width: 25px;
      height: 25px;
      /*  图片圆形*/
      border-radius: 50%;
      margin-left: 5px;
    }

    .input {
      width: 302px;
      display: flex;
      position: absolute;
      height: 40px;
      background-color: #dee1e6;
      bottom: 0;
      align-items: center;
    }

    .input img {
      cursor: pointer;
    }
    .input a{
      display: flex;
      align-items: center;
      margin-left: 2px;
    }

    .input input {
      width: 72%;
      height: 25px;
      border: none;
      outline: none;
      margin-left: 5px;
      padding-left: 10px;
    }
  </style>
</head>
<body>
<div id="container">
  <div class="container left-box">
    <div class="left"></div>
    <span class="main">
    早上好呀
    <img class="img" src="https://i02piccdn.sogoucdn.com/870117716c748693" alt="图片1">
  </span>
  </div>
  <div class="container right-box">
    <div class="right"></div>
    <span class="main">
      你也好呀
      <img class="img" src="https://i02piccdn.sogoucdn.com/870117716c748693" alt="图片1">
    </span>
  </div>
  <div class="container left-box">
    <div class="left"></div>
    <span class="main">
    嘿嘿
    <img class="img" src="https://i02piccdn.sogoucdn.com/870117716c748693" alt="图片1">
  </span>
  </div>
  <div class="container right-box">
    <div class="right"></div>
    <span class="main">
      不吃
      <img class="img" src="https://i02piccdn.sogoucdn.com/870117716c748693" alt="图片1">
    </span>
  </div>
  <div class="container left-box">
    <div class="left"></div>
    <span class="main">
    呵呵
  </span>
  </div>
</div>
<!--发送框-->
<div class="input">
  <img src="https://i04piccdn.sogoucdn.com/bf25cae4d3480354" alt="">
  <input type="text" value="1" placeholder="请输入内容">
  <a id="send" title="发送">
    <img src="https://i01piccdn.sogoucdn.com/f3d22b7cd0607493" alt="">
  </a>
</div>
</body>
<script>
  let send = document.getElementById('send')
  send.onclick = function () {
    let input = document.querySelector('input')
    let value = input.value
    let container = document.getElementById('container')
    let div = document.createElement('div')
    div.className = 'container right-box'
    div.innerHTML = `
      <div class="right"></div>
      <span class="main">
        ${value}
      </span>
    `
    value.length > 0 ? container.insertBefore(div, container.children[container.children.length]) : null
    input.value = '1'
    // 自动聚焦
    input.focus()
    // 滚动条自动滚动到最底部
    container.scrollTop = container.scrollHeight
  }
</script>
</html>

# 三角形

# 垂直居中一个浮动元素

# 聊天框

三角形

垂直居中一个浮动元素

聊天框