正文

css3实现聊天气泡

IP云
IP云V管理员/5 阅读
07/24
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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;}