SOURCE

// var he = $('.L-alert').height();
// console.log(he,'---','df');
// $('.arrows').css('bottom',5+'px');

<!-- <div class="one">
<span><i><s></s></i></span>
</div>
<div id="demo"></div>
<div id='left'></div> -->
<div class='df'>
  <div class="L-alert" style="display: block;">
    <div class='text'>
      1ee e
    </div>
    <div class='text'>
      222222222222222222222222222222
    </div>
    <div class='text'>
      33333333333333333333333333333333333
    </div>
  </div>
  <div class="arrowse">
  </div>
</div>

.df {
  position: relative;
  padding: 10px;
  top：20px;
  left:30px;
}

.L-alert {
  position: absolute;
  /* -webkit-box-shadow: 0 0px 10px rgba(0,0,0,.2); */
  box-shadow: 0 0px 10px rgba(0, 0, 0, .2);
  font-size: 12px;
  color: #798989;
  z-index: 10;
  min-width:14px;
  border: 1px solid #ec8e2  0;
  background: #fff;
  padding: 5px;
  display: none;
  border-radius: 5px;
}

.L-alert div {
  word-break: break-all;
  display:block
}


/* V */

.arrow {
  border-width: 16px;
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  left: 96px;
  bottom: -16px;
  margin-right: 0px;
  border-top-color: #ec8e20;
  border-bottom-width: 0;
}

.arrow:after {
  position: absolute;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 16px;
  left: -16px;
  bottom: 1px;
  content: "";
  z-index: 11;
  border-top-color: #fff;
  border-bottom-width: 0;
}


/* ^ */

.arrows {
  border-width: 16px;
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  left: 96px;
  bottom: 0px;
  margin-right: 0px;
  border-bottom-color: #ec8e20;
  border-top-width: 0;
}

.arrows:after {
  position: absolute;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 16px;
  left: -16px;
  bottom: -17px;
  content: "";
  z-index: 11;
  border-bottom-color: #fff;
  border-top-width: 0;
}


/* < */

.arrowsd {
  border-width: 16px;
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  left: 96px;
  bottom: -145px;
  margin-right: 0px;
  border-right-color: #ec8e20;
  border-left-width: 0;
}

.arrowsd:after {
  position: absolute;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 16px;
  left: 1px;
  bottom: -16px;
  content: "";
  z-index: 11;
  border-right-color: #fff;
  border-left-width: 0;
}


/* > */

.arrowse {
  border-width: 16px;
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  left: 96px;
  bottom: -145px;
  margin-right: 0px;
  border-left-color: #ec8e20;
  border-right-width: 0;
}

.arrowse:after {
  position: absolute;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 16px;
  left: -17px;
  bottom: -16px;
  content: "";
  z-index: 11;
  border-left-color: #fff;
  border-right-width: 0;
}


/* #demo{
  width:100px;
  height:100px;
  border:1px solid red;
  position:relative;
  background:#fff;
 border-radius: 6px;
}

白色小三角形叠加在黑色大三角形上面，就只剩下2px的黑边了，实现了右边的小凸起效果

#demo:before{
  content:"";
  width:0;
  height:0;
  position:absolute;
  left:100px;
  top:18px;
  border-top:solid 8px transparent;
  border-left:solid 8px red;       黑色大三角形
  border-bottom:solid 8px transparent;

}

#demo:after{
  content:"";
  width:0;
  height:0;
  position:absolute;
  left:100px;
  top:20px;
  border-top:solid 6.5px transparent;
  border-left:solid 6.5px #fff;     白色小三角形
  border-bottom:solid 6.5px transparent;
}

#left{
  width:100px;
  height:100px;
  top:200px;
  left:30px;
  border:2px solid red;
  position:relative;
  background:#fff;
}

白色小三角形叠加在黑色大三角形上面，就只剩下2px的黑边了，实现了右边的小凸起效果

#left:before{
  content:"";
  width:0;
  height:0;
  position:absolute;
  left:-16px;
  top:18px;
  border-top:solid 20px transparent;
  border-right:solid 20px red;       黑色大三角形
  border-bottom:solid 20px transparent;
}

#left:after{
  content:"";
  width:0;
  height:0;
  position:absolute;
  left:-16px;
  top:20px;
  border-top:solid 18px transparent;
  border-right:solid 18px #fff;     白色小三角形
  border-bottom:solid 18px transparent;
}









div.one{
              margin-top: 30px;
              width: 150px;
             height: 60px;   文本高度由内容撑起
              background-color: pink;
              
          }
          i{
             font-style: normal;
             display: inline-block; 
             width: 16px;
            height: 8px;  高度为s便签的一半
             background-color: pink;
 
             overflow: hidden;  要点:设置隐藏属性 超出部分不显示
 
             position: relative;  微调  控制箭头在中间
             top: 3px;
 
         }
         s{
            text-decoration: none;
             display: inline-block;
            width: 16px;
             height: 16px;
             font-size: 16px;
             line-height: 16px; 设置字体 和 行高改变属性
 
             利用微调 控制箭头方向 未设置向上
             position: relative;
             top: -9px;
         }
#demo{
  width:100px;
  height:100px;
  border:2px solid red;
  position:relative;
}

白色小三角形叠加在黑色大三角形上面，就只剩下2px的黑边了，实现了右边的小凸起效果

#demo:before{
  content:"";
  width:0;
  height:0;
  position:absolute;
  left:100px;
  top:18px;
  border-top:solid 15px transparent;
  border-left:solid 15px blue;       黑色大三角形
  border-bottom:solid 15px transparent;
  background:red;
}

#demo:after{
  content:"";
  width:0;
  height:0;
  position:absolute;
  left:100px;
  top:20px;
  border-top:solid 13px transparent;
  border-left:solid 13px transparent;     白色小三角形
  border-bottom:solid 13px transparent;
} */