#高效前端#（1）带有三角形的边框

一、三角形的边框

   
    .chat-mag {
      width: 200px;
      height: 70px;
      border: 1px solid #ffffff;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ffffff;
    }

    .chat-mag:before {
      content: "";
      position: absolute;
      left: -10px;
      top: 33px;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-right: 10px solid #ffffff;
    }

<div class="chat-mag">hi 亲</div>

二、添加阴影效果【加上filter这句话就可以控制阴影】

.chat-mag {
   filter: drop-shadow(0 0 3px #ffffff);
}