【腾讯云】云产品限时秒杀，爆款1核2G云服务器，首年99元

聊天框突出箭头 

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>聊天框</title>
  <style type="text/css">
  .message {
    position: relative;
  }
  
  .box {
    margin-left: 30px;
    display: block;
    width: auto;
    max-width: 400px;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 5px;
    word-wrap: break-word;
    float: left;
  }
  
  .box:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: 20px;
    top: 8px;
    border: 5px solid transparent;
    border-right-color: #ccc;
  }
  
  .box:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: 21px;
    top: 8px;
    border: 5px solid transparent;
    border-right-color: white;
  }
  </style>
</head>

<body>
  <div class="message">
    <div class="box">
      asdasasdasasdasasdasasdasasdasasdasasdasasdasasdasasdasasdasasdasasdasasdasasdasasdasasdas
    </div>
  </div>
</body>

</html>

原理为通过border画箭头，其实存在两个箭头，一个为灰色，一个为白色，白色遮住往右偏移1像素，遮住做灰色箭头的一部分留下1px的边框以及遮住信息框的部分边框。

效果如下：

posted @ 2018-03-20 09:19  happenzh  阅读(212)  评论(0)  编辑  收藏  举报