效果圖
代碼
html：
<div class="message1">
大家好，我是小胡<br>個(gè)人主頁(yè)：hlz.space<br>個(gè)人服務(wù)網(wǎng)站：www.loveconvert.com
</div>
<div class="message2">
大家好，我是小胡<br>個(gè)人主頁(yè)：hlz.space<br>個(gè)人服務(wù)網(wǎng)站：www.loveconvert.com
</div>
css：
.message1,
.message2 {
float:left;
width: 200px;
height: 80px;
margin: 50px;
background-color: skyblue;
border-bottom-color: skyblue;
/*為了給after偽元素自動(dòng)繼承*/
color: #fff;
font-size: 12px;
line-height: 18px;
padding: 5px 12px 5px 12px;
box-sizing: border-box;
border-radius: 6px;
position: relative;
word-break: break-all;
}
.message1::after {
content: '';
position: absolute;
top: 0;
right: -24px;
width: 20px;
height: 20px;
border-width: 0 0 20px 20px;
border-style: solid;
border-bottom-color: inherit;
/*自動(dòng)繼承父元素的border-bottom-color*/
border-left-color: transparent;
border-radius: 0 0 60px 0;
}
/** 通過(guò)對(duì)小正方形旋轉(zhuǎn)45度解決 **/
.message2::before {
content: '';
position: absolute;
top: 50%;
left: -5px;
width: 10px;
height: 10px;
margin-top: -10px;
background: inherit;
/*自動(dòng)繼承父元素的背景*/
transform: rotate(45deg);
}
