css实现聊天框箭头样式

 li{
    list-style: none;
    padding:30px 62px;
    &.right{
      color: #ff7063;
      text-align: right;
      &>div{
        float: right;
        .poptip{
          border:1px solid #ff7063;text-align:left;
          i{right: -60px;left: auto;background: #ff7063;}
          &::before{
            border-left: 10px solid #ff7063;
            border-right: 0;
            left: auto;
            right: 0;
            margin-left: 0;
            margin-right: -11px;
        }
        &::after{
            border-left: 10px solid #fff;
            border-right: 0;
            left: auto;
            right: 0;
            margin-left: 0;
            margin-right: -10px;
        }
        }
      }
    }
    &>div{
      float: left;width: 48%;
      p{font-size: 13px;color: #34495e;padding-bottom: 5px;;span{padding-right:10px}}
      .poptip{
        padding: 9px 18px;border:1px solid #2fd4a4;position:relative;height: 62px;
        &::before{
          content: '';
            border-right: 10px solid #2fd4a4;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 0;
            position: absolute;
            left: 0;
            top: 30%;
            margin-left: -10px;
            margin-top: -10px;
        }
        &::after{
          content: '';
            border-right: 10px solid #fff;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 0;
            position: absolute;
            left: 0;
            top: 30%;
            margin-left: -9px;
            margin-top: -10px;
        }
        i{position: absolute;left: -60px;background: #2fd4a4;width: 40px;height: 40px;
        border-radius: 50%;color: #fff;text-align: center;line-height: 40px;top: 0;
        font-style: normal;}
        a{
          font-size: 14px;
          color: #34495e;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; 
        }
      }
    }

  }

左右li已经区分