css3實現聊天氣泡

1：

<div class="comment"></div><style type="text/css">
  .comment {    width: 150px;    height: 35px;    position: relative;    margin: 30px auto 0;    background: #f8ac09;    border-radius: 5px;  }

  .comment:after {    content: '';    width: 0;    height: 0;    position: absolute;    top: 5px;    right: -16px;    border: solid 8px;    border-color: transparent transparent transparent #f8ac09;    font-size: 0;  }</style>

2：

<div class="comment"></div><style type="text/css">

.comment {  width: 150px;  height: 35px;  position: relative;  margin: 30px auto 0;  background-color: #faf8f3;  border: 1px solid #fbe2a0;  border-radius: 5px;}
.comment:after {  content: '';  width: 8px;  height: 8px;  position: absolute;  top: 10px;  right: -5px;  transform: rotate(45deg);  background-color: #faf8f3;  border: 1px #fbe2a0;  border-style: solid solid none none;}