Study on using characters instead of pictures to achieve rounded or sharp corners

Please see the following screenshot I took from Google Gmail page (this is the second time I have taken a screenshot from the same location):

The small downward-pointing triangle in the red circle in the picture is the used character, which is a non-mainstream character. In fact, the Google character is only a small application, and its true potential has not been reflected. This article will explore in a pioneering way how to use characters instead of images to achieve the sharp corner effect that seems to be only achieved by images, or the rounded corner effect that is mostly achieved by images. I haven’t done an in-depth study on character flying, so some of the conclusions or methods are not optimal. There may be more perfect methods in the future, so the word beta is added to the title of this article to indicate testing. Some of the methods mentioned in this article may not be practical in actual projects. The key is to help colleagues broaden their thinking and demonstrate the potential of characters in web development.
Note: In this article, "characters" mainly refer to characters with special shapes that cannot be directly input by keyboard. Although the English letters ABC are also considered characters, the "characters" mentioned in this article do not include such common characters. The same applies below and I will not go into details.

1. Understand some characteristics of characters

1. See the truth <br />As for characters, my understanding is that they are the same thing as the Chinese characters, English letters, etc. on the page. First of all, the character pattern is composed of pixels of the same color on the display, so there will be no trouble with jagged edges. If you use Photoshop to make a small triangle image, there may be hateful white edges, but characters will never have this problem. Secondly, characters are essentially text, and are subject to CSS properties such as font-size and color that affect text.

2. Advantages of using characters instead of pictures: ① No need to draw or cut out pictures, which saves a lot of effort! For page engineers, the workload is greatly reduced. You know, dealing with small images smaller than 10 pixels is very time-consuming and energy-consuming.
② Don’t worry about the problem of noise edges. The characters are all solid-color pixels, so it is difficult to have noise edges.
③Easy to control! If you want to make the character pattern bigger, just increase the font-size. If you want to change the color, use color. So, the characters are very well behaved and easy to control. If it's a picture, try changing its color. You are not Liu Qian, and you are not Harry Bit, so you can't do it.
④The page loading size has become smaller. Anyone who studies computers should know that one English character is one byte and one Chinese character is two bytes. Although I don't know whether the various characters represent patriotism or fawning on foreigners, but in any case, it is at most two bytes (unit b). If it is a picture, although I have not verified it, according to experience, it should occupy more space than the characters.
⑤In theory, there are fewer page link requests. Why is it called theoretically? Because in reality, the images are integrated into one image (css Sprite), so even if one small image is missing, the number of times the entire page requests the image remains unchanged. But what if this small picture is independent? Wouldn’t that mean one less picture request? Then the server will be happy!

3. Character defects ① Performance in different browsers.
Now assume that IE browser represents China and Firefox browser represents South Korea. A Chinese woman (♀) went to South Korea and ended up looking completely different. The term is: Some characters behave differently in different browsers. This kind of inconsistency can be divided into two categories. One kind is due to plastic surgery, where the face is changed. There is no hope for this. It is harder to go back to the past than to ask Lin Chiling to give you a back massage. The other kind is due to beauty treatments. For example, after using Chanel or Estee Lauder cosmetics for a month or so, the result is a big transformation from Sister Furong to a beautiful duckling. There is still hope for this. Let her work as a programmer for two months and she is guaranteed to go back to the past. Being a programmer is just a joke. In fact, consistency in expression is achieved by setting the font (font-family), which will be discussed later in this article.
②The size and positioning are difficult to control.
Characters are essentially different from images and do not have clear height and width. If you do not have a good understanding of the characteristics of the text on the page, it will be difficult to achieve accurate and compatible positioning. There is also the way characters are encoded on the page and what fonts are sensitive. For example, some characters display well in gb3212 Chinese encoding, but are just square boxes in utf-8 encoding - garbled characters; they display well in Songti, but look different in other fonts.
③ Gradient effect cannot be achieved.

2. Some Examples of the Relationship between Characters and Fonts

The first part of the demo page shows some characters that may be used in the main body of this article and how they appear in common fonts. The picture below shows representative character differences. The differences are caused by different fonts and browsers. Fortunately, we can get compatibility by trying different fonts.

Differences between characters in different fonts and browsers

3. Use characters to achieve rounded rectangles and sharp corners

To use characters to achieve rounded or sharp corners, the following characters can be used:
Sharp angle in the left and right direction “＜＞”; sharp angle in the up and down direction “∧∨”; solid sharp angle “► ◄ ▲▼”; solid circle: “ ● ”; hollow circle “ ○ ”; quarter hollow circle “╰ ╯╭ ╮” and regular prism “◆”. 1. The relationship between fonts and character display

The sharp corners on the left and right sides are in Songti font: <>
Not affected by font: ＜＞

Here the sharp corners on the left and right are in Arial font: <>
Not affected by font: ＜＞

The sharp corners on the left and right sides are in Lucida Sans Unicode: <>
Not affected by font: ＜＞

The sharp corners on the left and right here are in Times New Roman font: <>
Not affected by font: ＜＞

The sharp corners on the left and right sides are in Verdana font: <>
Not affected by font: ＜＞

Here, the sharp corners in the up and down directions are in Songti font with small sharp corners: ˇ^
Not affected by font: ∧∨

Here, the sharp corners in the up and down directions are in Arial font, with small sharp corners: ˇ^
Not affected by font: ∧∨

The sharp corners in the upper and lower directions are in Lucida Sans Unicode font, small sharp corners: ˇ^
Not affected by font: ∧∨

The sharp corners in the upper and lower directions are in Times New Roman font, with small sharp corners: ˇ^
Not affected by font: ∧∨

Here the sharp corners in the up and down directions are in the Verdana font, with small sharp corners: ˇ^
Not affected by font: ∧∨

Here is a 45-degree angle, the font is Songti: ∠

Here is a 45-degree sharp-angled solid, in Arial font: ∠

Here is a 45-degree angle, in Lucida Sans Unicode :

Here is a 45-degree angle, in Times New Roman font: ∠

Here is a 45 degree angle, in Verdana font: ∠

Here is a solid sharp corner, the font is Songti: ► ◄ ▲▼

Here is the solid sharp corner, the font is Arial: ► ◄ ▲▼

Here is the solid corner, the font is Lucida Sans Unicode: ► ◄ ▲▼

Here is the solid sharp corners, the font is Times New Roman: ► ◄ ▲▼

Here is the solid sharp corner, the font is Verdana: ► ◄ ▲▼

Here is a solid circle. Due to its limited size, it behaves like a hexagonal solid. The font is Songti: ●

Here is a solid circle. Due to its limited size, it behaves like a hexagonal solid. The font is Arial: ●

Here is a solid circle. Due to its limited size, it behaves like a hexagonal solid. The font is Lucida Sans Unicode: ●

Here is a solid circle. Due to its limited size, it behaves like a hexagonal solid. The font is Times New Roman: ●

Here is a solid circle. Due to its limited size, it behaves like a hexagonal solid. The font is Verdana: ●

Here is a hollow circle with the font in Songti: ○

Here is a hollow circle with the font in Arial: ○

Here is a hollow circle in Lucida Sans Unicode: ○

Here is a hollow circle with Times New Roman font: ○

Here is a hollow circle with the font Verdana: ○

Here is a quarter arc, the font is Songti: ╰ ╯╭ ╮

Here is a quarter circle in Arial font: ╰ ╯╭ ╮

Here is a quarter circle in Lucida Sans Unicode: ╰ ╯╭ ╮

Here is a quarter circle in Times New Roman: ╰ ╯╭ ╮

Here is a quarter arc, in Verdana: ╰ ╯╭ ╮

4. Implementing a rounded rectangle with a solid color background

Fill the four corners with a quarter solid circle to achieve a rounded corner effect with the background color.