css制作聊天气泡android,纯CSS实现两种聊天气泡

效果图

代码

html：

大家好，我是小胡
个人主页：hlz.space
个人服务网站：www.loveconvert.com

大家好，我是小胡
个人主页：hlz.space
个人服务网站：www.loveconvert.com

css：

.message1,

.message2 {

float:left;

width: 200px;

height: 80px;

margin: 50px;

background-color: skyblue;

border-bottom-color: skyblue;

/*为了给after伪元素自动继承*/

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;

/*自动继承父元素的border-bottom-color*/

border-left-color: transparent;

border-radius: 0 0 60px 0;

}

/** 通过对小正方形旋转45度解决 **/

.message2::before {

content: '';

position: absolute;

top: 50%;

left: -5px;

width: 10px;

height: 10px;

margin-top: -10px;

background: inherit;

/*自动继承父元素的背景*/

transform: rotate(45deg);

}