How to use border-image to implement text bubble border sample code

During the development activity, I encountered a very simple text bubble effect, which is roughly like this.

Emmmm, it looks simple. The implementation idea is as follows

• The main body is a div, just add gradient, border and rounded corners.
• The ingot cuts the picture on the left and uses ::before to position it on the left.
• The mouse cuts the picture on the right side and uses ::after to position it on the right side.

It's basically not difficult and can be done in minutes. until...

Product: Oh, by the way, this bubble chart will be made configurable in the background later. Then we can just upload the picture, which will be regarded as the user’s personal signature. I:! ! ! (╯‵□′)╯︵┻━┻

This is a bit embarrassing. You can’t have a before picture and an after picture for the product and write the gradient in between yourself. I guess I'll be hacked to death in any minute.

In the early years at work, I heard an Android colleague talk about something called .9png, so I searched online to see if the front end could achieve a similar effect. Sure enough, I found it.

.9png

What is .9png? .9png is an image format on Android, specifically used for bubble effects. Its characteristic is that it divides a picture into 9 parts, and the four corner areas will not be stretched. Only the middle part will be stretched.

In this way, even if your content area expands, the elements retained in the corners will not be deformed.

Front-end implementation

Smart students can directly click here to see the effect https://codepen.io/gong12339/pen/PowxmzL

The following attributes are needed to implement .9png on the front end.

The officially recommended .9png image resolution is 81 * 81, so each of the 9 cut areas is 27 * 27 in width and height. Because my piece is a rectangle, I need to measure the position of the slices myself. And my picture obviously does not support vertical stretching

.border {
  border-width: 18px 44px 25px 28px;
  border-style: solid;
  border-image-source:url(https://raw.githubusercontent.com/gong12339/vic-blog/master/static/img/border.9.png);
  border-image-slice:25 44 25 28 fill;
  border-image-width:25px 44px 25px 28px;
}

• border-width: 27px; Set the border width
• border-style: solid; Set the border type
• border-image-source: url('a.png')
• Set the image address, nothing to say
• border-image-slice: 27 27 27 27;
• Set the slice position (top, right, bottom, left). If they are all the same, you can just write one.
• border-image-width: 27px 27px 27px 27px;
• Set the border width (top, right, bottom, left). If they are all the same, you can just write one

Here we will focus on border-image-slice , which means drawing a line at a corresponding distance from the top, right, bottom, and left of the image, and then cutting the image into 9 areas (note that units cannot be included).

At this point we have basically completed the configuration

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.