css3聊天气泡框随内容变化四周不变是怎么样做成的

聊天框随内容撑大,但是左下角和右上角的不变是怎么样做成的;

---

可以考虑下border-image

---

聊天窗口本身有个position：relative,四个角上采用绝对定位，这样，无论内容这么变化，四个角依旧在那里，位置不变。至于四个角是采用before,after伪类来写，还是采用单独的标签来写，见仁见智

---

css3支持多个背景图片

---

我认为是这个图片的定位，它应该是把这个聊天这个块级内容当成祖先元素，图片根据祖先元素进行定位，通过 top bottom left right 进行定位，不管聊天框有多大，这个图片一直在聊天的四个位置，图片不变化，可以设置图片的大小

---

css的position属性，改成relative或者absolute，然后再用top, left, right, bottom定位。

---

<div>发的开发力度<br>发的开发力度<br>发的开发力度<br>发的开发力度<br>发的开发力度<br>发的开发力度</div>

div {
  position: relative;
  padding: 10px;
  background: yellow;
  border-radius: 10px;
  width: 200px;
  margin: 30px auto;
}
div:after {
  width: 10px;
  height: 10px;
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  background: red
}
div::before {
  width: 10px;
  height: 10px;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  background: blue
}

---

精通CSS里有个图片门可以实现，但是会有一些些多标签。after和before也可以做