css - 设计带有圆 Angular 边框的聊天文本框

Question

我必须将聊天应用程序文本框创建为下面的附加图像，我已经尝试过但无法创建显示的文本框。

.leftpanel-messages {
    background-color: #FFFFFF;
    padding: 5px 5px 0px 5px;
    float: left;
}
.leftpanel-messages ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.leftpanel-messages ul li {
    display:inline-block;
    clear: both;
    padding: 5px 15px 5px 10px;
    border-radius: 10px;
    border-bottom-right-radius: 0;
    margin-bottom: 2px;
    font-family: Helvetica, Arial, sans-serif;
    position: relative;
}
.him {
    background: transparent;
    border:1px solid #eee;
    float: left;
}
.him > p {
    font-size: 13px;
    margin: 0 0 0.2rem 0;
}

.me {
    float: right;
    background: #0084ff;
    color: #fff;
}

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 leftpanel-messages">
  <div class="" style="padding:15px 10px 0 10px;">
      <ul>
          <li class="him">
              <p>Text message send by him</p>
              <div></div>
          </li>
      </ul>
  </div>
</div>

谁能帮我在文本框末尾添加右 Angular ？

Answer 1

使用 :before 和 :after

.leftpanel-messages {
    background-color: #FFFFFF;
    padding: 5px 5px 0px 5px;
    float: left;
}
.leftpanel-messages ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.leftpanel-messages ul li {
    display:inline-block;
    clear: both;
    padding: 5px 15px 5px 10px;
    border-radius: 10px;
    border-bottom-right-radius: 0;
    margin-bottom: 2px;
    font-family: Helvetica, Arial, sans-serif;
    position: relative;
}
.him {
    background: transparent;
    border:1px solid #eee;
    float: left;
    position: relative;
}
.him > p {
    font-size: 13px;
    margin: 0 0 0.2rem 0;
}

.me {
    float: right;
    background: #0084ff;
    color: #fff;
}

.him:before {
  width: 0;
      height: 0;
      border-style: solid;
      border-width: 13px 0 0 13px;
      border-color: transparent transparent transparent #eee;
      position: absolute;
      content: '';
      bottom: -1px;
      right: -12px;
      transform: scale(0.7, 1);
}

.him:after {
     width: 0;
      height: 0;
      border-style: solid;
      border-width: 12px 0 0 12px;
      border-color: transparent transparent transparent #ffffff;
      position: absolute;
      content: '';
      bottom: 0;
      right: -10px;
      transform: scale(0.7, 1);
}

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 leftpanel-messages">
  <div class="" style="padding:15px 10px 0 10px;">
      <ul>
          <li class="him">
              <p>Text message send by him</p>
              <div></div>
          </li>
      </ul>
  </div>
</div>

或者你可以只使用一个伪元素 :before with background-image with a little triangle.