div实现网易云音乐评论的背景框

看到网易云音乐网页版的评论系统，它是用2个图标折叠显示出这种效果的

实现方式

• 三角的实现，使用div设置 border 的方式创建三角形。 用2个三角形的覆盖，最外层的三角形颜色和文字框背景一样，确保只显示三角的边
• 主要用到div的绝对定位，但是要确保是要相对于某个div的绝对定位，所以最外层 <div class="wap"> 设置为 position: relative;

<div class="wap">
  <div class="main">
    内容内容内容
  </div>
  <div class="arrow"></div> 
  <div class="sarrow"></div>
<div>

.wap{     
  position: relative;
  width:300px    // 最外层控制长宽
}

.main{
  display:block;
  border:1px solid red;
  position:relative;
  padding:10px;
  background-color:#fff;
    
}

.arrow{
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-right: 5px solid red;
  border-bottom: 5px solid transparent;
  position: absolute;
  top:7px;
  left:-4.5px;

}

.sarrow{
  width: 0;
  height: 0;
  border-top: 4.5px solid transparent;
  border-right: 4.5px solid #fff;
  border-bottom: 4.5px solid transparent;
  position:absolute;
  top:8px;
  left:-3.5px;
}

在线查看效果