CSS可以實(shí)現(xiàn)很多有意思的東西，比如仿微信的消息框。

/* 定義消息框 */
.message-box {
display: flex;
justify-content: flex-end;
position: relative;
margin: 20px 0;
}
/* 定義消息內(nèi)容 */
.message-content {
max-width: 60%;
padding: 10px;
background-color: #e6e6e6;
border-radius: 10px;
box-shadow: 1px 1px 3px #999;
}
/* 定義消息尖角 */
.message-triangle {
position: absolute;
bottom: 0;
right: -10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #e6e6e6;
}

在HTML中，只需要寫一個(gè)包括消息內(nèi)容和尖角的div元素即可：

<div class="message-box">
<div class="message-content">這是一條仿微信的消息框</div>
<div class="message-triangle"></div>
</div>

效果如下：